下拉刷新实际上是在用户操作下拉交互时重新调用接口，然后将新获取的数据再次渲染到页面中。
操作步骤
基于 scroll-view 组件实现下拉刷新，需要通过以下方式来实现下拉刷新的功能。
- 配置
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-viewrefresher-enabled@refresherrefresh="onRefresherrefresh":refresher-triggered="isTriggered"class="scroll-view"scroll-y
>…省略
</scroll-view>
猜你喜欢组件定义重置数据的方法
// src/components/XtxGuess.vue
// 重置数据
const resetData = () => {pageParams.page = 1guessList.value = []finish.value = false
}
// 暴露方法
defineExpose({resetData,
})
