小程序上拉加载,下拉刷新
小程序上拉加载,下拉刷新
data: { collectinformation: null, number: 1, size: 10, isOpenLoading: true, isEmpty: true, isLoadingTrue: true, mylist: null, mylists: null, },
onPullDownRefresh部分代码
//下拉刷新 onPullDownRefresh: function(e) { this.setData({ isEmpty: true, number: 1, mylist: [], isLoadingTrue: true }) this.getList(); },
onReachBuottom部分
isOpenLoading就是添加的闸门,目的是防止一个方法还没有结束就发起另外一个请求,造成num的混乱
onReachBottom: function(e) { if (this.data.isOpenLoading) { this.getList() } else { return } },
getList()部分
call.myRequest这边被我封装了,可以直接用自己的
getList: function() { var that = this that.setData({ mylists: [], isShowIcon: false, isOpenLoading: false }) wx.showNavigationBarLoading() var myData = { category: 0, number: that.data.number, size: that.data.size } call.myRequest("/user/collections/", that.listSuc, "POST", myData) }, listSuc: function(data, res) { var that = this var totalList = []; that.data.mylists = data.value if (!that.data.mylists || !that.data.mylists.length) { that.setData({ isLoadingTrue: false, isShowIcon: true, isOpenLoading: false }); wx.hideNavigationBarLoading(); wx.stopPullDownRefresh(); return } if (!that.data.isEmpty) { totalList = that.data.mylist.concat(that.data.mylists); } else { totalList = that.data.mylists that.data.isEmpty = false } that.setData({ mylist: totalList, isLoadingTrue: true, isShowIcon: true, isOpenLoading: true }) wx.hideNavigationBarLoading(); wx.stopPullDownRefresh(); that.data.number += 1 },
onLoad部分
onLoad: function(options) { this.$wuxRater = app.Wux().$wuxRater wx.setNavigationBarTitle({ title: '我的收藏', }) this.onPullDownRefresh() },
有个不太友好的问题就是在刷新的时候我就清空了mylists中的数据,虽然加了loading,感觉还是不太好。尤其是在突然断网的情况下,页面上就剩下几个loading,倍感凄凉。