小程序下拉刷新,上拉加载更多?
上拉加载:
①首先,固定一个包含列表数据的view高度,让它里面列表的数据溢出可以滚动:
<scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;">
<view wx:for="{{listData}}" wx:key="{{index}}" style="height: 40px;line-height: 40px;border-bottom: 1px solid #f4f4f4;">
Item{{item}}
</view>
</scroll-view>
②列表的数据请求就会分成两种情况:一种是初始化页面加载的第一页的数据;一种是滚动到底部请求的下一页的数据。所以我们在请求时要分成两种情况,若是第一页,isPage=false
,下一页的数据isPage=true
:
//请求数据
getData(isPage) {
console.log("需要拼接数据:", Network.pageData);
let params = {
pageNum: this.data.pageNo,
pageSize: 30
}
//请求
Network.pageData(params,(res,err)=>{
if (isPage) {
//下一页的数据拼接在原有数据后面
this.setData({
listData: this.data.listData.concat(res.result)
})
} else {
//第一页数据直接赋值
this.setData({
listData: res.result
})
}
})
},
③步骤一提到的固定高度的view
,它在往上滚动的时候,滚动到一定的位置便请求下一页的数据。我这里设置了当view
距离到底部还有100px
时,触发请求下一页的数据:
//到达底部
scrollToLower: function (e) {
this.setData({
pageNo: this.data.pageNo + 1
})
this.getData(true);
},
下拉刷新:
① 要使用的api有:
此外,除了下拉刷新,有时候可能是在某个事件进行时触发刷新动作,此时可以调用wx.startPullDownRefresh(Object object) 此api的作用是:“ 开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。”
- wx.showNavigationBarLoading(Object object)
- wx.showLoading(Object object)
- wx.hideLoading(Object object)
- wx.hideNavigationBarLoading(Object object)
- wx.stopPullDownRefresh(Object object)
- wx.request(Object object)
//刷新 onRefresh(){ //在当前页面显示导航条加载动画 wx.showNavigationBarLoading(); //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '刷新中...', }) this.getData(); }, //网络请求,获取数据 getData(){ wx.request({ url: '', //网络请求执行完后将执行的动作 complete(res){ //隐藏loading 提示框 wx.hideLoading(); //隐藏导航条加载动画 wx.hideNavigationBarLoading(); //停止下拉刷新 wx.stopPullDownRefresh(); } }) }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { //调用刷新时将执行的方法 this.onRefresh(); }
②除了在js页面编写响应的逻辑之外,还需要再相应页面的json中写入以下配置,这个配置允许这个页面进行下拉刷新动作
{ "enablePullDownRefresh": true }
特别需要注意的是:
- 开始写的时候先看看有没有已经存在的onPullDownRefresh:function()函数,否则将不能监听到用户的下拉刷新动作
- 注意相关api的配对使用,不要忘了在需要刷新结束时调用wx.stopPullDownRefresh(),否则,页面将会保持下拉状态、不会回弹。