uni-app顶部下拉舒心

下拉刷新实际上是在用户操作下拉交互时重新调用接口，然后将新获取的数据再次渲染到页面中。

操作步骤

基于 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-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,
})