小程序分页加载

最新推荐文章于 2023-04-30 10:42:52 发布

「已注销」

最新推荐文章于 2023-04-30 10:42:52 发布

阅读量459

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/clear_code/article/details/106686622

版权

小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

长长的列表，需要进行分页加载，在小程序中分页特别简单，只需要在json文件中设置enablePullDownRefresh为true，调用onPullDownRefresh（监听用户下拉动作）和onReachBottom（页面上拉）两个方法就可以了；
当然还需要在获取列表的时候进行一些操作，代码如下：

data

	page: 1,
    pageSize: 4,
    list:[],
    hasData:true

json

"enablePullDownRefresh": true

js

这是获取列表页和分页的流程；判断他每次请求时候还有没有值，如果没有值了就赋值原数组，有值的话就继续拼接显示；

 getList(){
    // this指向
    const _this = this;
    // 需要传递的值
    var data = {
        token:wx.getStorageSync('token'),  
        page:this.data.page
      }
      // ajax请求
    wx.request({
      // basicURL是在app.js中配置的域名;
      url: _this.data.basicURL+'Goods/index',
      method:"GET",
      data:data,
      header: {
        "content-type":"application/x-www-form-urlencoded"
      },
      success(res){
    if(res.data.status == 1){
      // 返回的数组
      var result = res.data.result;
      // 如果返回的列表的长度没有我每页请求的长度达.代表之后没有新内容了
      // 没有数据就把当前list给他赋值就好了,并且让hasData为false，等下次在进入这个判断条件的时候，就不让他在累加了，否则会一直刷出最后几条数据，然后弹出提示框提示没有值了
      if(result.length < _this.data.pageSize){
        if(_this.data.hasData){
              _this.setData({
                list: _this.data.list.concat(result),
                hasData:false
              })
              wx.showToast({
                title: '没有数据了哦',
                icon: "none",
                duration: 2000
              })
            }
      }else{
        // 如果还有值,就把请求出来的数组和list拼接在一起,并使它的page+1
        _this.setData({
          list: _this.data.list.concat(result),
          page: _this.data.page + 1
        })
      }
    } 
      }
    })
  },

这个函数需要在onReady、onPullDownRefresh、onReachBottom三个函数中调用一次，这样下拉。上拉加载就完成了；

 onReady: function () {
    this.getList();
  },
  
  onPullDownRefresh: function (e) {
    this.getList();
  },

  onReachBottom: function () {
    this.getList();
  },