在小程序或各類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();

感謝大家觀看，我們下次再見