小程序上/下拉刷新数据分页

2021-07-13  本文已影响0人  Henry01

实现小程序上/下拉刷新分页功能分为两步即可:
1,在对应组件的json中:

{
  "navigationBarTitleText": "告警数据",
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "enableReachBottom": true,
  "backgroundTextStyle": "dark"
}

2,在对应组件的js中:

/*
 * 
 * 告警数据
 * Author: Henry
 * 
 */
import config from '../../utils/config';
import HTTP from '../../utils/request';
Page({
  data: {
    postsList:[],
    page:1,//页数
    rows:5,//条数
    total:0,//总页数
    onRefresh: true,
  },

  onLoad() {
    this.getAlarmDataFn();
  },

  /**
   * 获取告警数据
   */
  getAlarmDataFn(){
      var that = this
      var onRefresh = that.data.onRefresh;//false为重新刷新数据,true为分页累加数据
      let userId = wx.getStorageSync('userId')
      wx.showToast({
        title: '数据加载中',
        icon: 'loading',
        duration: 500
      });
      HTTP.getAlarmData({
        userId:userId,
        "page": that.data.page,
        "rows": that.data.rows,
      }).then((res) => {
        var datas = res.data;
        if(onRefresh){//false为重新刷新数据,true为分页累加数据
          that.setData({
            //postsList: res.data,
            postsList: that.data.postsList.concat(datas), //累加list,
            page:that.data.page,
            total: res.count /  that.data.rows
          })
        }else{
          that.setData({
            postsList: datas, //重新覆盖list,
            page:that.data.page,
            total: res.count /  that.data.rows
          })
        }
      })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    var that = this
    that.data.page = that.data.page + 1
    this.getAlarmDataFn()
  },

  /**
   * 页面下拉触底事件的处理函数
   */
  onPullDownRefresh: function () {
    var that = this
    that.data.page = that.data.page - 1
    if(that.data.page<1){
      wx.showToast({
        title: '无更多数据',
        duration: 500
      });
    }else{
      this.getAlarmDataFn()
    }
  },
})
上一篇 下一篇

猜你喜欢

热点阅读