微信小程序实现上拉触底（后台分页）加载

这篇文章是用的laravel8+微信小程序。
要实现微信小程序下拉加载首先我们要缕清他的思路。在我看来，可以这样实现：首先我们给js一个data属性page，page的值默认为1，也就是第一页。然后加载出第一页后 page自增1 此时下滑触底可以触发触底事件：加载下一页，再来一次循环，并且我们需要每次在接到数据时判断数据是否为空，如果为空，直接给出数据已经到底了。

具体代码：

Page({

	data: {
		lists:[]
		//给page一个初始值用来获取第一页数据
  		page:1,
  		//request用来判断是否发起请求，请往下看逻辑
  		request:true
  	},
  
	onLoad() {
		//onload中自动加载第一页
    	this.getList();
  	},
  	//触底事件绑定函数
	getList(){
    //console.log('触发了触底事件');
    //设置定时器是为了过一段时间再次请求数据，增加用户体验
    /*
	**如果说用户下拉到没有数据为止，那就会给出提示已经没有数据，为了防止一直给出数据，我们就要
	**使request变为false，这样就不会走下面的请求事件。但是过了一段时间之后用户又下滑到底部了，
	**这时候我们的计时器时间已经结束了，就可以再次请求了，所以他主要就是为了防止短时间内一直请求数据
	*/
    
    setTimeout(()=>{
      this.setData({
        request:true
      })
    },50000);
	
	//如果request值为空，说明已经没有数据了
    if(!this.data.request){
      wx.showToast({
        title: '已经没有更多数据了',
        icon:'none',
        duration:1500,
        mask:true
      });
      //停止执行
      return;
    }

	//request有值时
    wx.showLoading({
      title: '数据加载中',
      mask:true
    });
    let page = this.data.page;
    let token = wx.getStorageSync('token');
    wx.request({
    	//携带token请求数据
      url: 'http://www.example.com/api/v1/getList',
      method:"GET",
      header:{
        'Authorization':`Bearer ${token}`
      },
      data:{
        page
      },
      success:res=>{
      //请求成功关闭加载动态效果框
        wx.hideLoading();
        //console.log(res);
        //判断是否请求到数据
        if(res.data.data.length > 0){
        //如果请求到数据，页数自增留着下次用，并把数据渲染给js数组
          page++;
          this.setData({
            lists:[...this.data.lists,...res.data.data],
            page
          })
        }else{
        //如果没有请求到数据，request值为false，提示已无数据
          this.setData({
            request:false
          });
          wx.showToast({
            title: '已经没有更多数据了',
            icon:'none',
            duration:1500,
            mask:true
          });
        }
      }
    })
  },
	



})

后端示例

后端最好使用原生分页，因为原生分页可以清晰的表达我们的需求。
因为本次测试我用的是laravel8，laravel8中的paginate经测试可正常使用
简单贴个示例吧

public function getList(Request $request)
    {
        //分页第一步，获取每页条数
        $pageSize = 4;
        //分页第二步，获取当前页
        $page = $request->get('page')?$request->get('page'):1;
        //分页第三步：计算偏移量
        $offsite = ($page-1) * $pageSize;
        //查询
        $data =  $res = Model::orderBy('id','desc')->offset($offset)->limit($pageSize)->get();
        return ['status'=>20020,'msg'=>'查询成功','data'=>$data];

    }