uni-app 下拉刷新和上拉加载(优化)
先在pages.json中将需要添加上拉刷新或下拉加载的页面添加如下代码:“enablePullDownRefresh”:true//开启下拉刷新项目结构:"pages": [{"path": "pages/search/search","style": {"navigationBarTitleText": "uni-ui基础项目","h5":{"titleNView":false},"enabl
·
先在pages.json中将需要添加上拉刷新或下拉加载的页面添加如下代码:
“enablePullDownRefresh”:true //开启下拉刷新
项目结构:
"pages": [{
"path": "pages/search/search",
"style": {
"navigationBarTitleText": "uni-ui基础项目",
"h5":{
"titleNView":false
},
"enablePullDownRefresh":true //开启下拉刷新
}
} ]
使用:
//定义两个全局变量
var timerUpId,timerDownId;
/***部分代码****/
onPullDownRefresh() { //触发上拉刷新函数
if (timerUpId != null) { //为防止回弹多次触发刷新
clearTimeout(timerUpId)
}
timerUpId = setTimeout(() => {
console.log("下拉刷新");
uni.stopPullDownRefresh(); //停止下拉刷新动画
}, 1000)
},
onReachBottom() { //监听页面触底函数
if (timerDownId != null) { //为防止回弹多次触发刷新
clearTimeout(timerDownId)
}
timerDownId = setTimeout(() => {
console.log("上拉加载");
}, 500)
},
更多推荐
已为社区贡献42条内容
所有评论(0)