小程序中实现上拉加载和下拉刷新的方法有两种:
- 调用小程序上拉加载和下拉刷新的api
- 通过监听 scroll-view 滑动到顶部和滑动到底部
注意：官方文档给出了第一种方法的局限性
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
下面来介绍一下两种方法的实现
第一种方法(调用小程序上拉加载和下拉刷新的api)
(1) 在页面或者全局的xxx.json文件中开启下拉刷新和页面上拉触底事件触发时距页面底部距离，单位px
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 10px,
"backgroundColor": "#F87A5F",
}
(2) 在js中监听用户下拉动作
Page({
onPullDownRefresh(){
wx.showNavigationBarLoading() //在当前页面显示导航条加载动画
this.getData() //请求数据
},
onReachBottom(){
wx.showNavigationBarLoading() //在当前页面显示导航条加载动画
this.getData() //请求数据
}
})
第二种方法(通过监听 scroll-view 滑动到顶部和滑动到底部)
(1) wxml中
在scroll-view中添加bindscrolltoupper和bindscrolltolower事件
<scroll-view class="my-list" scroll-y="true" bindscrolltoupper="refreshData" bindscrolltolower="loadMoreData">
<view class='refreshData' wx:if="{{refreshing}}">正在刷新...</view>
<view class="my-list-item" wx:for="{{tomatoes}}" wx:for-index="key" wx:key="index">
<text>{{item}}</text>
</view>
<view class='loadingData' wx:if="{{loadingMore}}">正在加载...</view>
<view class='tipMessage'>--- 我是有底线的 ---</view>
</scroll-view>
(2) js中
添加wxml中的同名函数
Page({
refreshData(){
wx.showNavigationBarLoading(); //在当前页面显示导航条加载动画
this.setData({refreshing: true});
console.log('下拉刷新');
this.getData();
},
loadMoreData(){
wx.showNavigationBarLoading(); //在当前页面显示导航条加载动画
this.setData({loadingMore: true});
console.log('上拉加载');
this.getData(); ///请求数据
}
})
