小程序實現簡單分頁功能（下拉加載更多）

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、上效果圖：上滑，下拉都會觸發請求到后台，拿到分頁數據（懶得做動態圖了，將就看吧）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。。。