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

阿新 • • 發佈：2020-10-26

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();
  },