uni-app下拉刷新触底加载更多

逃离我推掉我的手 2021-07-25 02:49 2108阅读 0赞

首先在pages.json 配置文件中配置    "enablePullDownRefresh": true  需要在哪用加载就配置在路由的style里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

两个事件

//下拉刷新
    onPullDownRefresh() {
    
    			console.log('下拉刷新');
    			
    		},
    
    //触底加载更多
    
    onReachBottom(e) {
    
    			console.log('触底加载更多');
    
    		}

完整dome:

<template>
    	<view>
    		个人中心
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    		<view>请求返回:{
       { res }}</view>
    	</view>
    </template>
    
    <script>
    var aThat, _that;
    export default {
    	data: function() {
    		return {
    			res: '',
    			page: 1
    		};
    	},
    	onLoad: function() {
    		_that = this;
    	},
    	methods: {
    		onPullDownRefresh() {
    			console.log('下拉刷新', _that.page);
    			uni.request({
    				url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例，并非真实接口地址。
    				data: {
    					rawData: _that.page
    				},
    				method: 'GET', //请求方式
    				header: {
    					'custom-header': 'application/json' //自定义请求头信息
    				},
    				success: res => {
    					console.log('刷新返回', res.data);
    					(_that.res = 1), (_that.page = 1);
    					uni.stopPullDownRefresh();
    				}
    			});
    		},
    		onReachBottom(e) {
    			console.log('触底加载更多', _that.page);
    			uni.request({
    				url: 'http://localhost/myUniApp/php/onPullDownRefresh.php', //仅为示例，并非真实接口地址。
    				data: {
    					rawData: _that.page
    				},
    				method: 'GET', //请求方式
    				header: {
    					'custom-header': 'application/json' //自定义请求头信息
    				},
    				success: res => {
    					console.log('加载更多返回', res.data);
    					(_that.res = res.data), (_that.page = _that.page + 1);
    					uni.stopPullDownRefresh();
    				}
    			});
    		}
    	}
    };
    </script>
    
    <style></style>

//dome中的测试接口php文件  onPullDownRefresh.php

<?php
        header("Content-Type:text/html; charset=utf-8");//解决中文乱码
        header("Access-Control-Allow-Origin:application/json"); //解决跨域
        header('Access-Control-Allow-Methods:get');// 响应类型
        mysql_connect('localhost', 'root', 'root');//链接数据库默认账号密码都为root
        mysql_set_charset('utf-8');//解决中文乱码问题
        mysql_select_db('text'); //选择数据库
        
        // 接收前端传过来的参数
    	$rawData =$_GET["rawData"];
         echo $rawData //把接受到的参数返回到前端
    ?>

注意：接口用之前一定要先开启phpStudy不然接口相当于没用  看看就好

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

官方下拉刷新：[https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh][https_uniapp.dcloud.io_api_ui_pulldown_id_onpulldownrefresh]  
触底加载更多 》》》生命周期函数：[https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F][https_uniapp.dcloud.io_collocation_frame_lifecycle_id_E9_A1_B5_E9_9D_A2_E7_94_9F_E5_91_BD_E5_91_A8_E6_9C_9F]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/d0e949585be24a1191c0b9cd38aa5a7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/0a795523fa5b451a81953e0ec95bed85.png
[https_uniapp.dcloud.io_api_ui_pulldown_id_onpulldownrefresh]: https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh
[https_uniapp.dcloud.io_collocation_frame_lifecycle_id_E9_A1_B5_E9_9D_A2_E7_94_9F_E5_91_BD_E5_91_A8_E6_9C_9F]: https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F