在小程序或各类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();感谢大家观看，我们下次再见
[...]export default App 这就是React中用函数的方式实现页面的展示，看得出来React又向函数式编程的开发方式迈进。是否能够成为主流这还要看市场，另外React中的Hook也是函数式编程的体现。后面我们也会写到。如果你还对类组件感兴趣，可以看这一篇文章： React中类组件如何实现？感谢大家观看，我们下次再见。[...]
[...]}从上面可以看出，在React中我们使用this.setState来修改变量的值。在这里我们要注意this的指向问题，如果有不懂可以看：函数中的this指向componentDidMountcomponentDidMount是表示组件已被渲染到dom中，被挂载到DOM上，这里就不得不提一下在React中如何引入组件相关的内容了。那么如何引入组件呢？在React中非常简单import HelloWo[...]
of course like your web site but you need to test the spelling on quite a few of your posts. A number of them are rife with spelling problems and I in finding it very troublesome to inform the reality nevertheless I will surely come again again.
新年快乐！
十天看一部剧，还可以吧![[[呲牙]]](https://www.xvzhu.cn/usr/themes/freewind/static/img/face/emotions/13.gif)
@梦不见的梦 行，谢谢提醒,我优化一下
网站的速度有待提升，每次打开都要转半天还进不来呢
@React实战爱彼迎项目(二) - 程序员鸡皮 哪里有问题了，报错了吗？![[[微笑]]](https://cdn.jsdelivr.net/gh/kevinlu98/freecdn@1.5//face/emotions/0.gif)
@Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品![[[发呆]]](https://cdn.jsdelivr.net/gh/kevinlu98/freecdn@1.5//face/emotions/3.gif)
我们大学那会，献血还给学分~