微信小程序请求列表数据（上拉触底-下拉刷新）

微信小程序请求分页列表数据（上拉触底-下拉刷新）

介绍

利用微信小程序 onReachBottom (触底触发的事件函数) onPullDownRefresh（下拉刷新事件函数），对请求到的数据进行下拉刷新和上拉触底的操作。

字段介绍

data:{
	list:[],//展示的数据容器
	pageSize:10,//每页数目
	pageIndex:0,//当前页
	total:0,//总数据量
	isLoadingL:false,//是否正在请求数据
}

上拉触底

描述

当用户上拉到手机底部，触发onReachBottom 事件，之后另请求参数 pageIndex+1 ，然后再次发起请求，之后将请求的数据与之前的原数据拼接到一起。完成上拉触底。

json配置

默认距离底部为50px时触发事件

"window": {
        "onReachBottomDistance": "50"
    },

js

//上拉触底
onReachBottom(){
	//判断还有没有数据了(如果请求页数和每页数量大于总数量，说明已经没有数据了，此时就不需要再请求了)
	if(this.data.pageIndex*this.data.pageSize>=this.data.total){
		//此时已经没有下列数据了
		return wx.showToast({
			title:'没有更多数据了!',
			icon:'none'
		})
	}
	//判断是否正在加载其他数据（防止重复请求数据）
	if(this.data.isloading) return
    
    this.setData({
        pageIndex:this.data.pageIndex+1
    })
	this.getDataList();
}

下拉刷新

描述

用户下拉，触发onPullDownRefresh事件，此时将 pageIndex 和 pageSize 重置，然后发起请求。

json配置

"window": {
        "backgroundTextStyle": "dark",
        "enablePullDownRefresh":"true",
    },

js

//下拉刷新
onPullDownRefresh(){
	//重置参数
	this.setData({
		page:1,
		list:[],
		total:0
	})
	//重新发起请求
	//这里之所以不写成 this.getDataList() 是因为下拉刷新完成之后要将刷新样式隐藏，需要执行wx.stopPullDownRefresh()，所以传一个函数，当请求数据完成后执行这个函数
	this.getDataList(()=>{
        wx.stopPullDownRefresh();
	})
}

请求数据getDataList()

js

//数据请求
getDataList(go){
	//更改标识，防止重复请求，对应上拉触底
	 this.setData({
        loading:true
	})
	wx.showLoading();//弹出请稍等加载框
	wx.request({  //开始请求数据
  		url: 'example.php', //接口地址
 		data: {
   			pageIndex:this.data.pageIndex,
   			pageSize:this.pageSize,
  		},
  		header: {
    		'content-type': 'application/json' // 默认值
  		},
  		success:(res)=>{//请求成功
			this.setData({
	        	list:[...this.data.list,...res.data],
            	total:res.total
        	})
		},
		complete:()=>{
			wx.hideLoading()//隐藏请求数据样式
			this.setData({isloading:false})//请求完成也要把标识符改一下，对应上拉触底
        	go && go() //短路运算符 如果有go 这个函数，说明是上拉刷新，此时需要执行回调函数，取消上拉刷新样式
		}
	})
}