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

This commit is contained in:
linxi
2025-11-25 11:05:28 +08:00
parent 642139d0a2
commit b53e2d1eaa
+26 -10
View File
@@ -189,7 +189,7 @@
<view class="new-zone-wrap"> <view class="new-zone-wrap">
<image @click="toNewZone" class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image> <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"> <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" :duration="500" @animationfinish="bindSwiperInstance($event, 'newZone')"> <swiper :autoplay="swiperInstances.newZone" @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 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})"> <view class="zx-item" @click="goGoodsCon({id: item.productId})">
<image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image> <image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
@@ -459,7 +459,13 @@ export default {
shareData: {}, shareData: {},
currentIndex: 0, currentIndex: 0,
// 轮播组件实例 // 轮播组件实例
swiperInstances: {} swiperInstances: {
productSwiper: true,
homestay: true,
banner: true,
festival: true,
newZone: true,
}
} }
}, },
onLoad() { onLoad() {
@@ -487,6 +493,9 @@ export default {
} }
}) })
}, },
onShow() {
this.pageToShowHandle()
},
onHide() { onHide() {
this.pageToHideHandle() this.pageToHideHandle()
}, },
@@ -511,20 +520,27 @@ export default {
// 页面显示时恢复轮播 // 页面显示时恢复轮播
pageToShowHandle() { pageToShowHandle() {
// 恢复所有轮播组件的自动播放 // 恢复所有轮播组件的自动播放
Object.values(this.swiperInstances).forEach(swiper => { this.swiperInstances = {
swiper && swiper.autoplayStart && swiper.autoplayStart() productSwiper: true,
}) homestay: true,
banner: true,
festival: true,
newZone: true,
}
}, },
// 页面隐藏时暂停轮播 // 页面隐藏时暂停轮播
pageToHideHandle() { pageToHideHandle() {
// 暂停所有轮播组件的自动播放 this.swiperInstances = {
Object.values(this.swiperInstances).forEach(swiper => { productSwiper: false,
swiper && swiper.autoplayStop && swiper.autoplayStop() homestay: false,
}) banner: false,
festival: false,
newZone: false,
}
}, },
// 绑定轮播组件实例 // 绑定轮播组件实例
bindSwiperInstance(e, key) { bindSwiperInstance(e, key) {
this.swiperInstances[key] = e.detail // this.swiperInstances[key] = e.detail
}, },
changeRecommendKeyword(e) { changeRecommendKeyword(e) {
this.keywordIndex = e this.keywordIndex = e