Fix：4655 【旅居商城小程序】在首页熄屏或切换软件10秒钟以上，甄选好礼轮播商品会出现异常抖动

pages/home/index.vue

@@ -45,6 +45,8 @@
         autoplay
         circular
         style="height: 510rpx;"
+        :duration="500"
+        @animationfinish="bindSwiperInstance($event, 'banner')"
       >
         <block
           v-for="(item, bannerIndex) in banner"
@@ -114,6 +116,8 @@
             circular
             autoplay
             :interval="3000"
+            :duration="500"
+            @animationfinish="bindSwiperInstance($event, 'homestay')"
           >
             <swiper-item
               v-for="(stay, stayIndex) in contentHomestay"
@@ -185,8 +189,8 @@
           <view class="new-zone-wrap">
             <image @click="toNewZone" class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
             <view class="swiper-wrap-zx v12-mt-2">
-                <swiper autoplay @change="changeIndex"  :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000">
+                <swiper autoplay @change="changeIndex"  :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000" :duration="500" @animationfinish="bindSwiperInstance($event, 'newZone')">
-                  <swiper-item style="position: absolute; width: 100%; transform: translate(200%, 0px) translateZ(0px);" v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
+                  <swiper-item v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
                     <view class="zx-item" @click="goGoodsCon({id: item.productId})">
                       <image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
                       <view class="v12-pa-2">
@@ -301,6 +305,8 @@
                   circular
                   autoplay
                   :interval="3000"
+                  :duration="500"
+                  @animationfinish="bindSwiperInstance($event, 'productSwiper')"
                 >
                   <swiper-item
                     v-for="(swiperItem, swiperIndex) in item.list"
@@ -451,7 +457,9 @@ export default {
       recommendKeyword: [],
       keywordIndex: 0,
       shareData: {},
-      currentIndex: 0
+      currentIndex: 0,
+      // 轮播组件实例
+      swiperInstances: {}
     }
   },
   onLoad() {
@@ -500,6 +508,24 @@ export default {
     changeIndex(e) {
       this.currentIndex = e.detail.current
     },
+    // 页面显示时恢复轮播
+    pageToShowHandle() {
+      // 恢复所有轮播组件的自动播放
+      Object.values(this.swiperInstances).forEach(swiper => {
+        swiper && swiper.autoplayStart && swiper.autoplayStart()
+      })
+    },
+    // 页面隐藏时暂停轮播
+    pageToHideHandle() {
+      // 暂停所有轮播组件的自动播放
+      Object.values(this.swiperInstances).forEach(swiper => {
+        swiper && swiper.autoplayStop && swiper.autoplayStop()
+      })
+    },
+    // 绑定轮播组件实例
+    bindSwiperInstance(e, key) {
+      this.swiperInstances[key] = e.detail
+    },
     changeRecommendKeyword(e) {
       this.keywordIndex = e
     },