uni-app中vue3+setup实现下拉刷新、上拉加载更多效果

在小程序或各类app中，下拉刷新和上拉加载更多是极为常见和使用非常频繁的两个功能，通过对这两个功能的合理使用可以极大的方便用户进行操作。

合理的设计逻辑才能更容易挽留住用户，因为这些细节性的小功能点就变得极为重要起来。

那么在uni-app中基于vue3+语法糖中如何实现下拉刷新和上拉加载更多效果呢？

一、pages.json文件中对应页面配置如下：

"pages": [ 
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",
            "enablePullDownRefresh":true,//下拉刷新，必须配置该参数
            "onReachBottomDistance":100,//距离底部100像素时，触发加载更多功能
        }
    }
]
1
2
3
4
5
6
7
8
9
10

二、页面中使用下拉刷新功能和加载更多效果

<script lang="ts" setup>
    import { onPullDownRefresh , onReachBottom } from "@dcloudio/uni-app"
    onPullDownRefresh(() => {
        console.log("下拉刷新")
    })
    onReachBottom(() => {
        console.log("上拉加载更多")
    })
</script>
1
2
3
4
5
6
7
8
9

三、启动下拉刷新，进行关闭。

uni.stopPullDownRefresh();
1

感谢大家观看，我们下次再见