小程序封裝上拉加載和下拉刷新

封裝在公用的js文件里

// resList.js
const app = getApp()
module.exports = Behavior({
  behaviors: [],
  properties: {},
  data: {
    list: [], //列表數據
    recordCount: 0, //列表總條數
    pageNo: 1,
    pageSize: 20
  },
  methods: {
    // 參數
    _requestPageList(callback) {
      // let opt = {
      //   type: 1, //(主要是和禮品管理共享接口區別排序)
      //   isValid: 1, //(是否有效，1是2否)此處默認填寫1，只有有效期內的才能再禮品列表展示
      //   name: ""
      // }
      // this._requestPageListCom("giftPageList", opt, callback);
    },
    // 列表接口
    _requestPageListCom(url, params, callback) {
      let opt = Object.assign({}, params, {
        pageData: {
          pageNo: this.data.pageNo,
          pageSize: this.data.pageSize
        },
      })
      app.$request.post(app.$config[url], opt).then(res => {
        if (res.returnResult === 200) {
          const oldList = this.data.list
          const newGoodsList = res.returnData.data
          const nList = [...oldList, ...newGoodsList]
          let newData = {}; //新變更數據
          for(let i in nList){
            newData['list['+i+']'] = nList[i]
          }
          this.setData(newData);//賦值列表數據
          this.setData({
            recordCount: res.returnData.recordCount
          })
          if(callback && typeof callback === 'function'){
            callback()
          }
        }
      })
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.setData({
        list: [],
        pageNo: 1
      });
      this._requestPageList(() => {
        // 當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新
        wx.stopPullDownRefresh();
      });
    },
    // 上拉加載
    onReachBottom(){
      let _self = this;
      if (this._freshing || _self.data.list.length >= _self.data.recordCount || _self.data.recordCount === 0) return
      this._freshing = true;
      this.setData({
        pageNo: ++_self.data.pageNo
      });
      this._requestPageList(() => {
        _self._freshing = false;
      });
    },
  }
})

頁面引用

let resListCom = require('../../mixins/resList')

Page({
  behaviors: [resListCom],
  data: {
    
  },
  onLoad: function () {
    this._requestPageList()
  },
  _requestPageList(callback) {
    let opt = {
      id: wx.getStorageSync('virtualUserID')
    }
    // 第一個參數是請求的接口名
    this._requestPageListCom("virtualIntegral", opt, callback);
  },
})

// json 文件中不能寫注釋

{
  "navigationBarBackgroundColor": "#ff6700",
  "navigationBarTextStyle": "white",
  "backgroundColor": "#ff6700",
  "backgroundTextStyle":"light",
  "enablePullDownRefresh": true,  //開啟下拉刷新
  "onReachBottomDistance": 50,  //上拉加載設置觸發距離
  "navigationBarTitleText": "頁面標題",
  "usingComponents": {
    "van-image": "@vant/weapp/image/index"  //組件
  }
}