小程序实现简单分页功能（下拉加载更多）

2023-10-16 09:52:52

1、先建一个List页面

2、在json文件里写好小程序的分页配置

{
  "navigationBarTitleText": "管理记录",
  "enablePullDownRefresh": true,
  "enableReachBottom": true,
  "usingComponents": {}
}

如图：

3、TestList.wxml页面写页面内容，如下：

<!--pages/timecard/overwork/Testlist/Testlist.wxml-->
<view class="main">
  <view class="div_center">

    <view wx:for="{{list}}" hidden="{{box2_hidden}}" style=" background-color:white;">

        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell">
                <view class="weui-cell__bd" >
                  <checkbox>{{item.staff_name}}</checkbox>
                </view>
                <view class="weui-cell__ft">{{item.dept_name}}</view>
            </view>
        </view>
        </view>
  </view>


</view>

4、最后js文件代码：三个地方撸代码：1、data里初始化变量，2、写一个获取数据的方法，3、分别在下拉，上拉监听函数里加载获取数据的方法

　　41、data里面变量初始化：

/**
   * 页面的初始数据
   */
  data: {

      list: [],   //会员列表
      total: 0,    //分页总数
      page: 1,    //分页记录数
      pagesize: 10,   //分页大小

　　　　 onRefresh: true,

},

　　4.2、写一个方法，去后台取到list分页数据：我写的是getList方法

/**
   * 请求后台获取数据
   */ 
  getList: function () {
    var that=this;

    var onRefresh = that.data.onRefresh;//false为重新刷新数据，true为分页累加数据


    //请求后台数据
    var usr = wx.getStorageSync(‘xxx‘);//url请求地址前缀，自己的后台
    wx.request({
      url: app.globalData.im_host + ‘/im_app/queryPersonList.action‘,
      data: {
        ‘login_user‘: usr,
        ‘page‘: that.data.page,
        ‘pagesize‘: that.data.pagesize,
      },
      method: ‘get‘,
      success: function (res) {
        var datas = res.data.data;
        // console.log(12233);
        // console.log(datas);
        
        if(datas != null && datas.staff_list.length > 0){
          if(onRefresh){//false为重新刷新数据，true为分页累加数据
            that.setData({
              // total: 5,
              list: that.data.list.concat(datas.staff_list), //累加list,
              page: that.data.page + 1
            });
          }else{
            that.setData({
              // total: 5,
              list: datas.staff_list, //重新覆盖list,
              page: that.data.page + 1
            });
          }
          
        }else{
          wx.showToast({
            title:‘没有更多数据了‘,
            icon:‘none‘
          })
          that.setData({
              isloading:true
          })

          }
      },
      complete : function(res){
        wx.hideLoading();
      },
      fail: function (res) {
        console.log(‘load fail‘);
        
      }
    })


    
  },

　　4.3、别忘了在生命周期函数onLoad，加载此getList()方法

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList();
  },

　　4.4、最后分别在生命周期函数onPullDownRefresh，监听用户下拉动作和生命周期onReachBottom，加载获取数据的方法getList()，如下：

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log(‘fresh‘)

    var that = this;
    that.setData({
      page:1,
      pagesize:10,
      onRefresh: false //重新加载数据
    });
  //调用刷新时将执行的方法
    //0.5s加载显示，如果不加会一直显示加载中，造成不好的用户体验
    // var that = this
    wx.showNavigationBarLoading() //在标题栏中显示加载
    setTimeout(function() {
      wx.showLoading({
        title: ‘加载中‘,//加载转圈显示
      });
      that.getList();
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 500);
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log(‘bottom‘);

    
    wx.showLoading({
      title: ‘加载中‘,//加载转圈显示
    });
    
    var that = this;
      that.setData({
        onRefresh: true //累加数据
    });
    this.getList();
  },

5、上效果图：上滑，下拉都会触发请求到后台，拿到分页数据（懒得做动态图了，将就看吧）

。。。

小程序实现简单分页功能（下拉加载更多）

码农公寓

相关文章