[移动开发]微信小程序分页 下拉加载更多

前段小程序 home.json

Page({
    data: {
        img:[
            {img:"/img/1.jpg"},    //这是轮播图的，不属于下拉加载
            {img:"/img/2.jpg"},
            {img:"/img/3.jpg"},
            {img:"/img/4.jpg"},
            {img:"/img/5.jpg"}
        ],
        lsit:"",
        page:1,
        last_page:""
    },
    onLoad: function (options) {
        let that = this;
           wx.request({
             url: 'http://www.test.com/essay',
             data:{
                 pageSize :5,//每页查询条数
             },
             success:(res)=>{
               console.log(res.data.data.data);
               that.setData({
                list:res.data.data.data,
                last_page:res.data.data.last_page,//获取最后一页的页码数存起来
               })
             }
           })
      },
     
      //瀑布流分页 上拉
      onReachBottom: function (e) {
        let _this = this;
        let page = _this.data.page+1;//获取下一页
            wx.showLoading({//温馨提示正在加载第几页
              title: '正在加载第'+page+"页",
            })
            if(page>_this.data.last_page)
            {//判断是否到最后一页
              wx.showToast({
               //友情提示
                title: '到底了',
                icon:'error'
              })
            }
           
        //设置定时器 过滤加载时间
        setTimeout(function(){
          wx.request({
            url: 'http://www.test.com/essay',
            data:{
              page:page,//页码
              pageSize:5//一次查询几条
            },
            success(res){
              _this.setData({
                  page:_this.data.page+1,//页码加一
                  list:_this.data.list.concat(res.data.data.data)//两个数组合并
              })
            }
          })
          wx.hideLoading();//清除正在加载的时间
        },1000)
      },
})

后端PHP

public function essay($pageSize){

        $data=Essay::paginate($pageSize);
        return json(['code'=>200,'msg'=>'成功','data'=>$data]);
    }