uniapp vue3的下拉刷新和上拉加载
开启页面的下拉刷新,注意这个不是可滚动视图的下拉刷新.
一般页面建议使用页面外的,不要使用scroll-view里面的下拉刷新.
pages:
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh":true,//下拉刷新，必须配置该参数
"onReachBottomDistance":100,//距离底部100像素时，触发加载更多功能
}
}
]
js:
<script lang="ts" setup>
import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
onPullDownRefresh(() => {
console.log("下拉刷新")
})
onReachBottom(() => {
console.log("上拉加载更多")
})
</script>
常用代码:
关闭下拉刷新:
uni.stopPullDownRefresh();
链接:
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果_uni-app_2019ab-Vue