在小程序或各类app中,下拉刷新和上拉加载更多是极为常见和使用非常频繁的两个功能,通过对这两个功能的合理使用可以极大的方便用户进行操作。
合理的设计逻辑才能更容易挽留住用户,因为这些细节性的小功能点就变得极为重要起来。
那么在uni-app中基于vue3+语法糖中如何实现下拉刷新和上拉加载更多效果呢?
一、pages.json文件中对应页面配置如下:
"pages": [ {"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePullDownRefresh":true,//下拉刷新,必须配置该参数"onReachBottomDistance":100,//距离底部100像素时,触发加载更多功能}}
]
二、页面中使用下拉刷新功能和加载更多效果
<script lang="ts" setup>import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"onPullDownRefresh(() => {console.log("下拉刷新")})onReachBottom(() => {console.log("上拉加载更多")})
</script>
三、启动下拉刷新,进行关闭。
uni.stopPullDownRefresh();
感谢大家观看,我们下次再见