下拉刷新实际上是在用户操作下拉交互时重新调用接口，然后将新获取的数据再次渲染到页面中。
操作步骤文章来源：https://www.toymoban.com/news/detail-819749.html
基于 scroll-view 组件实现下拉刷新，需要通过以下方式来实现下拉刷新的功能。文章来源地址https://www.toymoban.com/news/detail-819749.html
- 配置
refresher-enabled属性，开启下拉刷新交互 - 监听
@refresherrefresh事件，判断用户是否执行了下拉操作 - 配置
refresher-triggered属性，关闭下拉状态
首页出发下拉更新
// src/pages/index/index.vue
<script setup lang="ts">
// 下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
// 开启动画
isTriggered.value = true
// 重置猜你喜欢组件数据
//resetData()这个方法是猜你喜欢组件的方法
guessRef.value?.resetData() // 加载数据
await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()]) // 关闭动画
isTriggered.value = false
}
</script>
<!-- 滚动容器 -->
<scroll-view
refresher-enabled
@refresherrefresh="onRefresherrefresh"
:refresher-triggered="isTriggered"
class="scroll-view"
scroll-y
>
…省略
</scroll-view>
猜你喜欢组件定义重置数据的方法
// src/components/XtxGuess.vue
// 重置数据
const resetData = () => {
pageParams.page = 1
guessList.value = []
finish.value = false
}
// 暴露方法
defineExpose({
resetData,
})
到了这里，关于uni-app顶部下拉舒心的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
