微信小程序上拉加载方案

微信小程序上拉加载

微信小程序提供onReachBottom上拉事件

developers.weixin.qq.com/miniprogram…

思路

当前页和总页数进行对比，判断是否要进行加载。

	
	

		
		

			
			

				
			

		

		

			kotlin 
			

				复制代码
			

		

	
data: {  list:null, //列表  pageIndex:1, //请求页码  pageSize:10, //每页多少条   totalpage:0, //总页数   },    

	
	

		
		

			
			

				
			

		

		

			kotlin 
			

				复制代码
			

		

	
onShow() {  this.getReceivedListPage() },    // 页面上拉触底事件的处理函数 onReachBottom(){  if (this.data.pageIndex <= this.data.totalpage) {  this.getReceivedListPage()  } }, 

	
	

		
		

			
			

				
			

		

		

			kotlin 
			

				复制代码
			

		

	
getReceivedListPage() {   let page = this.data.pageIndex;    let params = {  pageIndex: this.data.pageIndex,  pageSize: this.data.pageSize,  };    getReceivedListPage(params).then(res => {    page++；    const resData = res.data.data;  const purification = resData.list.map((a, i) => {  return {  last: page - 1 == resData.pages && i == resData.list.length - 1  ? true : false, // 是否是最后一条数据  ...a  }  })    this.setData({  totalpage: resData.totalPage,  [`list[${this.data.pageIndex-1}]`]: purification,  pageIndex: page  });  });  }, 

[list[${this.data.pageIndex-1}]] : purification 这种写法是为避免setData数据量过大,list数据在使用时需注意多循环一层 ~