小程序分页下拉加载更多上拉加载更多

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

<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 () {

  }
})