下拉刷新：就是将数据清空 重新请求数据 配合onPullDownRefresh
上拉加载更多 重新请求数据 添加到list 配合onReachBottom
首先 json 页面要配置 "enablePullDownRefresh":true ,"backgroundTextStyle":"dark"
下拉刷新
wx.showNavigationBarLoading();
this.setData({
然后初始searchParam
isShowloading: true, //下拉刷新显示了loading
isEmpty:false, //表示数据暂时没有请求完
list:[]
},()=>{this.getList()})
获取数据的时候 判断list.length,选择整合数据还是赋值
isEmpty:res.data.data.length<this.data.searchParam.per_page?true:false
请求完成后的回调里判断是否是下拉刷新
if (this.data.isShowloading) {
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
this.setData({
isShowloading: false
})
}
上拉加载更多
if(!this.data.isEmpty){
this.setData({
searchParam: { ...this.data.searchParam,
current_page:this.data.searchParam.current_page+1
}
}, () => this.getList())
}
页面中有个 用于加载完数据后的显示
<view class="empty-tip" wx:if="{{isEmpty}}">
<text>没有更多了~</text>
</view>
