微信小程序如何做触底加载分页功能

微信小程序如何做触底加载分页功能

分页分为两种，一种是一次性将后台数据请求过来，再对这些数据进行分页，第二种就是一次请求几条数据，分批次请求，一般情况下是推荐第二种，因为第一种很容易造成服务器的卡顿

• 以列表页为例，一页十条，触底则加载下一页

• 大概思路就是将你每次要请求多少条数据传到后台接口，后台会返回你请求的这几条数据，在用户下拉一次时再去请求一次接口，每请求一次，当前页数+1，将接口返回的数据 concat( ) 拼接，存放在需要循环的数组对象中

         //isPage表示是否分页请求
         //getOrganizationLists是你自定义命名的方法名称
         //async 表示这个方法是异步的
         async getOrganizationLists(isPage) {
				var that = this
				if (isPage) {
				   //如果分页就把当前页数加1  page表示当前页数
				   this.setData({
				      page:this.data.page + 1
				   })
				} else {
				    //如果不是分页加载 默认请求第一页的数据 
				    //这时候用来循环列表的数组storesList重置为[] 
				    //status表示当前加载分页的状态 为loadmore时显示加载更多
				    this.setData({
				      page:1,
				      storesList:[],
				      status:'loadmore'
				   })
				}
				//自定义一个临时变量，存放当前的列表数据
				var storesList = this.data.storesList;
				//this.$api是封装的一个请求方法，
				//organizationLists是请求接口方法名称
				this.$api.organizationLists({
				    //传当前页数给接口，告诉接口当前请求的第几页
					page: this.data.page,
				}, function(res) {
				    //这里两个数组相加，接口返回的数组加上当前请求到的数组数据
					storesList = storesList.concat(res.data.list.data)
					//赋值到data中的变量
					that.setData({
				       storesList:storesList 
				   })
				    //当前的请求的页数已经大于等于接口返回的最后一页页数了
					if (that.data.page >= res.data.last_page) {
					//nomore表示没有更多了
						that.data.status = 'nomore'
					}
				})
			},

        //生命周期内调用
        //页面加载的时候调用方法，进入页面默认请求第一页
        onLoad() {
			this.getOrganizationLists();
		},
		//当前页面拉到底部  调用分页加载方法
		onReachBottom() {
		    //如果不是请求到了最后一页，才加载分页方法
		    if(this.data.status!='nomore'){
		         this.getOrganizationLists(true)
		    }
			
		},

<!-- 在wxml中循环这个storesList变量 -->
<view v-for="(item,index) in list" :key="cindex" class="dis-flex nearby-stores-item flex-x-between">
</view>