page注册onReachBottom()用于监听用户上拉触底事件,触发距离内滑动期间,本事件只会被触发一次,到底时加载数据,如下:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.loadMore()//到底时加载数据
},
特殊说明:
1、如果想设置距离底端多少距离时触发,可以在【app.json的window选项中】或【页面配置中】设置触发距离onReachBottomDistance,这里我们在list.json中设置:
{
"onReachBottomDistance": 5
}
2、实际使用中发现一个问题,上滑到底部时快速的再次滑到底部,这时候会重复触发加载更多方法导致重复的网络请求。这时候我们需要做一下限制,不要重复请求网络。
解决方法如下:通过记录上次加载时间lastRequestTime,保证两次网络请求的间隔大于2秒,这样就能避免重复调用加载更多的问题
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
// 通过记录上次加载时间lastRequestTime,保证两次网络请求的间隔大于1秒,这样就能避免重复调用加载更多的问题
let lastRequestTime = this.data.lastRequestTime
let nowRequestTime = (new Date()).getTime()
//限制两次网络请求间隔至少2秒
if ((nowRequestTime - lastRequestTime) < 2000) return
lastRequestTime = nowRequestTime
this.setData({lastRequestTime})
this.loadMore()
},