微信小程序获取数据列表的一致解决方案

onLoad、onPullDownRefresh、onReachBottom中获取数据列表的一致解决方案和WXML显示加载全部

微信小程序的页面加载事件说明：具体参考https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

  onLoad: function(options) {
    // 页面创建时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },

当页面数据主要是列表时，onLoad、onPullDownRefresh、onReachBottom三个函数都涉及到获取数据列表。

考虑的出发点是能否用一致的方案兼容三种需求~~

做过一个小程序后的经验总结

const db = wx.cloud.database();

Page({

data: {

    dataList: '',

    moreOrAllTip: '',

},

onLoad: function(options) {

    this.getDataList();

},

getDataList: function(options) {

        wx.showLoading({

            title: '加载中',

            mask: true

        });

    const length = this.data.dataList.length;

    db.collection('dataList')

    .skip(length)

    .get()

    .then(res => {

        console.log(res.data)

        wx.hideLoading();

        wx.stopPullDownRefresh();

        this.setData({

            dataList: length == 0 ? res.data : this.data.dataList.concat(res.data),

            moreOrAllTip:res.data.length == 20?"上拉加载更多":"全部加载完毕"

        });

    })

    .catch(err => {

        console.error(err)

    });

},

onPullDownRefresh: function() {

    this.data.dataList= [];

    this.getDataList();

},

onReachBottom: function() {

    if (this.data.moreOrAllTip != '全部加载完毕') {

         this.getDataList();

    };

}

})

如果涉及到不同的tab展示不同属性的数据，需要在切换tab时把dataList置空，然后获取数据的where逻辑要稍作修改，以便匹配不同的tab