feat: ✨ 首页下拉刷新

src/components/JbcSwiper.vue

@@ -1,6 +1,12 @@
 <template>
   <view class="carousel">
-    <swiper :circular="true" :autoplay="false" :interval="3000" @change="handleChange">
+    <swiper
+      :circular="true"
+      :autoplay="false"
+      :interval="3000"
+      :current="activeIndex"
+      @change="handleChange"
+    >
       <swiper-item v-for="item in props.list" :key="item.id">
         <navigator url="/pages/index/index" hover-class="none" class="navigator">
           <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
@@ -11,7 +17,7 @@
     <view class="indicator">
       <text
         v-for="(item, index) in props.list"
-        :key="item.id"
+        :key="item.id + index"
         class="dot"
         :class="{ active: index === activeIndex }"
       ></text>
@@ -21,18 +27,25 @@
 
 <script setup lang="ts">
 import type { BannerItem } from '@/types/home'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
-
 const props = defineProps<{
   list: BannerItem[]
 }>()
 
 // 当前轮播图索引
 const activeIndex = ref(0)
+
 // 轮播图切换
 const handleChange: UniHelper.SwiperOnChange = (e) => {
   activeIndex.value = e.detail!.current
 }
+
+watch(
+  () => props.list,
+  () => {
+    activeIndex.value = 0
+  },
+)
 </script>
 
 <style lang="scss">

src/pages/index/index.vue

@@ -3,7 +3,15 @@
     <!-- 自定义导航栏 -->
     <CustomNavbar />
     <!-- 滚动容器 -->
-    <scroll-view scroll-y enable-back-to-top class="scrool-view" @scrolltolower="onScrollToLower">
+    <scroll-view
+      scroll-y
+      enable-back-to-top
+      refresher-enabled
+      class="scrool-view"
+      :refresher-triggered="isRefreshing"
+      @scrolltolower="onScrollToLower"
+      @refresherrefresh="onRefresh"
+    >
       <!-- 轮播图 -->
       <JbcSwiper :list="bannerList" />
       <!-- 分类 -->
@@ -55,6 +63,21 @@ const onScrollToLower = () => {
   guessRef.value?.getMore()
 }
 
+// 下拉刷新
+const isRefreshing = ref(false)
+const onRefresh = async () => {
+  isRefreshing.value = true
+  // 重置轮播图 分类 热门
+  guessRef.value?.resetData()
+  await Promise.allSettled([
+    getBannerList(),
+    getCategoryList(),
+    getHotList(),
+    guessRef.value?.getMore(),
+  ])
+  isRefreshing.value = false
+}
+
 // 页面加载勾子
 onLoad(() => {
   getBannerList()