修改轮播bug

wuye-manager-uniapp/pages/index/index.vue

@@ -38,7 +38,7 @@
       <!-- 可滚动内容区 -->
       <view class="scroll-content">
         <!-- banner -->
-        <view class="bannarClass">
+        <view class="bannarClass" v-if="bannerList && bannerList.length > 0">
           <uni-swiper-dot
             class="uni-swiper-dot-box"
             @clickItem="clickItem"
@@ -48,6 +48,7 @@
           >
             <swiper
               class="swiper-box"
+              :key="bannerKey"
               :current="current"
               @change="onSwiperChange"
               autoplay
@@ -163,7 +164,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { onLoad, onUnload, onShow } from '@dcloudio/uni-app'
 import {
   getCurrentVillage,
@@ -182,6 +183,22 @@ const pendingCount = ref(0) //待巡检
 const InspectedCount = ref(0) //已巡检
 const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
 
+// 用于强制重新创建 swiper，避免列表变化时内部节点复用导致 getBoundingClientRect 空指针
+const bannerKey = computed(() => bannerList.value.map(item => item.id || item.url).join('_'))
+
+// banner 数据变化时重置当前索引，防止 current 越界
+watch(
+  () => bannerList.value,
+  newVal => {
+    if (!newVal || newVal.length === 0) {
+      current.value = 0
+    } else if (current.value >= newVal.length) {
+      current.value = 0
+    }
+  },
+  { deep: true }
+)
+
 // =======方法=======
 // 跳转小区
 const navigateToPage = () => {
@@ -302,13 +319,18 @@ function getbannarData() {
         const newData = res.data
         const oldData = bannerList.value
         if (JSON.stringify(newData) !== JSON.stringify(oldData)) {
+          current.value = 0
           bannerList.value = newData
         }
       } else {
+        current.value = 0
         bannerList.value = []
       }
     })
-    .catch(() => {})
+    .catch(() => {
+      current.value = 0
+      bannerList.value = []
+    })
 }
 
 // 接收选择小区返回的参数
@@ -337,11 +359,17 @@ onUnload(() => {
 })
 
 const clickItem = e => {
-  current.value = e.index !== undefined ? e.index : e
+  const idx = e.index !== undefined ? e.index : e
+  if (bannerList.value && idx >= 0 && idx < bannerList.value.length) {
+    current.value = idx
+  }
 }
 
 const onSwiperChange = e => {
-  current.value = e.detail.current
+  const idx = e.detail.current
+  if (bannerList.value && idx >= 0 && idx < bannerList.value.length) {
+    current.value = idx
+  }
 }
 </script>