评论

优雅方案:onLoad、onPullDownRefresh、onReachBottom中获取数据列表的一致解决方案

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

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

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

做过一个小程序后的经验,高手勿喷!

const db = wx.cloud.database();

Page({

data: {

    XXX: '',

    moreOrAllTip: '',

},

onLoad: function(options) {

    this.getXXX();

},

getXXX: function(options) {

        wx.showLoading({

            title: '加载中',

            mask: true

        });

    const length = this.data.XXX.length;

    db.collection('XXX')

    .skip(length)

    .get()

    .then(res => {

        console.log(res.data)

        wx.hideLoading();

        wx.stopPullDownRefresh();

        this.setData({

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

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

        });

    })

    .catch(err => {

        console.error(err)

    });

},

onPullDownRefresh: function() {

    this.data.XXX = [];

    this.getXXX();

},

onReachBottom: function() {

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

         this.getXXX();

    };

}

})

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


最后一次编辑于  07-29  
点赞 0
收藏
评论