小程序分頁 下拉加載更多 上拉加載更多

<view class="main">
  <view class="div_center">

    <view wx:for="{{list}}" wx:key="{{key}}">
        <view class="list">
          <view class="list_title">時間：{{item.operate_time}} </view>
          <view class="list_text_l">{{item.type_str}}-{{item.id}}：</view>
          <view class="list_text_r">{{item.operate_str}}</view>
        </view>
    </view>

  </view>


</view>

 

json文件

{
  "navigationBarTitleText": "管理記錄",
  "enablePullDownRefresh": true,
  "enableReachBottom": true,
  "usingComponents": {
    "header-model": "/components/header/header"
  }
}
json -- 寫了才可以觸發上拉時間,下拉觸底事件
注意:下拉需要頁面數據到手機底部才可以觸發的;

　　

js 文件

var getData = require('../../../utils/getData.js');

const app = getApp();
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      list          : [],   //會員列表
      total         : 0,    //分頁總數
      pageNum       : 1,    //分頁記錄數
      pageSize      : 10,   //分頁大小
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
      var that = this;
      if (!app.globalData.userinfo.admin_id){
          wx.redirectTo({
              url: '/pages/person/login/index'
          })
      }

      that.setData({
          userinfo     :    app.globalData.userinfo
      })

      that.getList();

  },
    getList:function(){
        var that = this;

        if (that.data.hasmoreData == false) {
            that.setData({ hiddenloading: true })
            return;
        }

        getData.getData('get_manage_record', {
            uid       :  app.globalData.userinfo.admin_id,
            page      :  that.data.pageNum,
            page_size :  that.data.pageSize,
            method    : 'POST'
        }, function (data) {
            if (data.errno){
                wx.showModal({
                    title   : '提示',
                    content : data.errdesc
                });
                return false;
            }

            console.log(data.data);
            that.setData({
                total         :   data.data.total_page,
                list          :   that.data.list.concat(data.data.data_list), //data.data,
                pageNum       :   that.data.pageNum + 1
            });

            if (that.data.total <= 0 || that.data.pageNum * that.data.pageSize > that.data.total) {

                wx.showToast({
                    title   : '無更多數據',
                    icon    : 'loading',
                    duration: 1000
                });

            } else {
                if (2 < that.data.pageNum){
                    wx.showToast({
                        title   : '數據加載中',
                        icon    : 'loading',
                        duration: 500
                    });
                }
            }

        });
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
      console.log('fresh')
      this.getList();
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
      console.log('bottom')
      this.getList()
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})