Fix:5173 【商城小程序】首页甄选好礼的轮播,长时间熄屏再打开,首页甄选好礼的轮播会异常卡顿,目前发现有这个现象的机型:iPhone XR、iPhone 16Pro
(cherry picked from commit b4b6fed1ab)
This commit is contained in:
+29
-3
@@ -200,7 +200,7 @@
|
||||
<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="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 :key="newZoneSwiperKey" :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}">
|
||||
<view class="zx-item" @click="toNewZone">
|
||||
<image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
|
||||
@@ -476,6 +476,8 @@ export default {
|
||||
keywordIndex: 0,
|
||||
shareData: {},
|
||||
currentIndex: 0,
|
||||
newZoneSwiperKey: 0,
|
||||
newZoneResumeTimer: null,
|
||||
// 轮播组件实例
|
||||
swiperInstances: {
|
||||
productSwiper: true,
|
||||
@@ -542,17 +544,33 @@ export default {
|
||||
},
|
||||
// 页面显示时恢复轮播
|
||||
pageToShowHandle() {
|
||||
// 恢复所有轮播组件的自动播放
|
||||
// 恢复所有轮播组件的自动播放,甄选好礼轮播先停后启,避免 iOS 熄屏恢复后卡顿
|
||||
if (this.newZoneResumeTimer) {
|
||||
clearTimeout(this.newZoneResumeTimer)
|
||||
this.newZoneResumeTimer = null
|
||||
}
|
||||
this.swiperInstances = {
|
||||
productSwiper: true,
|
||||
homestay: true,
|
||||
banner: true,
|
||||
festival: true,
|
||||
newZone: true,
|
||||
newZone: false,
|
||||
}
|
||||
this.currentIndex = 0
|
||||
this.newZoneSwiperKey += 1
|
||||
this.$nextTick(() => {
|
||||
this.newZoneResumeTimer = setTimeout(() => {
|
||||
this.swiperInstances.newZone = true
|
||||
this.newZoneResumeTimer = null
|
||||
}, 120)
|
||||
})
|
||||
},
|
||||
// 页面隐藏时暂停轮播
|
||||
pageToHideHandle() {
|
||||
if (this.newZoneResumeTimer) {
|
||||
clearTimeout(this.newZoneResumeTimer)
|
||||
this.newZoneResumeTimer = null
|
||||
}
|
||||
this.swiperInstances = {
|
||||
productSwiper: false,
|
||||
homestay: false,
|
||||
@@ -565,6 +583,12 @@ export default {
|
||||
bindSwiperInstance(e, key) {
|
||||
// this.swiperInstances[key] = e.detail
|
||||
},
|
||||
resetNewZoneCurrentIndex() {
|
||||
const products = (this.newZone && this.newZone.indexProducts) || []
|
||||
if (!products.length || this.currentIndex >= products.length) {
|
||||
this.currentIndex = 0
|
||||
}
|
||||
},
|
||||
changeRecommendKeyword(e) {
|
||||
this.keywordIndex = e
|
||||
},
|
||||
@@ -1458,6 +1482,7 @@ export default {
|
||||
_this.$set(_this, 'contentHomestay', data.contentHomestayV2 || [])
|
||||
_this.$set(_this, 'contentFestival', data.contentFestivalV2 || [])
|
||||
_this.$set(_this, 'newZone', data.newGoods || [])
|
||||
_this.resetNewZoneCurrentIndex()
|
||||
_this.$set(_this, 'hasExperienceCoupon', data.hasExperienceCoupon || 0)
|
||||
_this.$set(_this, 'hasUnusedExperienceCoupon', data.hasUnusedExperienceCoupon || 0)
|
||||
_this.$set(_this, 'experienceCouponImage', data.experienceCouponImage || '')
|
||||
@@ -1508,6 +1533,7 @@ export default {
|
||||
this.$set(this, 'contentHomestay', data.contentHomestayV2 || [])
|
||||
this.$set(this, 'contentFestival', data.contentFestivalV2 || [])
|
||||
this.$set(this, 'newZone', data.newGoods || [])
|
||||
this.resetNewZoneCurrentIndex()
|
||||
this.$set(this, 'hasExperienceCoupon', data.hasExperienceCoupon || 0)
|
||||
this.$set(this, 'hasUnusedExperienceCoupon', data.hasUnusedExperienceCoupon || 0)
|
||||
this.$set(this, 'experienceCouponImage', data.experienceCouponImage || '')
|
||||
|
||||
Reference in New Issue
Block a user