uni-app中下拉刷新及上拉刷新的使用
下拉刷新
开启下拉刷新的两种方式：
- 在pages.json中，找到当前页面的pages节点，并在style中添加 enablePullDownRefresh
"style":{
"enablePullDownRefresh": true
}
- 通过设置点击事件触发 uni.startPullDownRefresh() 方法
监听下拉刷新：onPullDownRefresh () 生命周期函数
关闭下拉刷新： uni.stopPullDownRefresh() 方法
例：下拉刷新改变数据，添加2秒延时器停止刷新事件
onPullDownRefresh () {
console.log('触发了下拉刷新')
setTimeout(()=>{
this.list = ['JAVA','UI','前端','测试','大数据']
uni.stopPullDownRefresh()
},2000)
}
上拉刷新
在 style 设置触底距离底部的距离 单位为px
"style":{
"onReachBottomDistance": 200
}
监听上拉刷新：onReachBottom() 生命周期函数
onReachBottom() {
console.log('页面触底了')
this.list = [...this.list,...['JAVA','UI','前端','测试','大数据']]
}