fix: 抽奖banner预取尺寸就绪后再渲染避免首帧撑高页面

Jacob

1 天以前 76005787a10f1cf2e26f1b0c1672836b7d633ed2

 pages/zone/index.vue
..
..
@@ -71,7 +71,8 @@
71
71
 					</view>
72
72
 				</view>
73
73
 			</view>
74
-			<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
74
+			<view @click="goLottery" class="lottery_banner"
75
+				v-if="info && info.isLottery && info.lotteryBanner && lotteryBannerReady">
75
76
 				<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
76
77
 					:style="{ height: lotteryBannerHeight }">
77
78
 				</image>
..
..
@@ -624,6 +625,7 @@
624
625
 			urlOption: {},
625
626
 			homeTop: '200',
626
627
 			lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
628
+			lotteryBannerReady: false, //是否已拿到banner尺寸（或已确认拿不到），未就绪前不渲染，避免首帧撑高
627
629
 			hasNewPop: false,
628
630
 			leftCoupon: {},
629
631
 			rightCoupon: {},
..
..
@@ -1455,15 +1457,23 @@
1455
1457
 		setLotteryBannerSize(info) {
1456
1458
 			let that = this
1457
1459
 			that.lotteryBannerHeight = ''
1458
-			if (!info || !info.isLottery || !info.lotteryBanner) return
1460
+			that.lotteryBannerReady = false
1461
+			if (!info || !info.isLottery || !info.lotteryBanner) {
1462
+				that.lotteryBannerReady = true
1463
+				return
1464
+			}
1459
1465
 			uni.getImageInfo({
1460
1466
 				src: info.lotteryBanner,
1461
1467
 				success: (img) => {
1462
1468
 					if (img.width > 0 && img.height > 0) {
1463
1469
 						that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
1464
1470
 					}
1471
+					that.lotteryBannerReady = true
1465
1472
 				},
1466
-				fail: () => { }
1473
+				fail: (err) => {
1474
+					console.warn('抽奖banner尺寸预取失败，回退为自适应', err)
1475
+					that.lotteryBannerReady = true
1476
+				}
1467
1477
 			})
1468
1478
 		},
1469
1479
 		getZoneDetail: function () {