From 76005787a10f1cf2e26f1b0c1672836b7d633ed2 Mon Sep 17 00:00:00 2001
From: Jacob <hlnie@tohours.com>
Date: 星期五, 23 十月 2026 13:26:14 +0800
Subject: [PATCH] fix: 抽奖banner预取尺寸就绪后再渲染避免首帧撑高页面
---
pages/goods_cate/goods_cate.vue | 203 ++++++++++++++++++++------------------------------
1 files changed, 82 insertions(+), 121 deletions(-)
diff --git a/pages/goods_cate/goods_cate.vue b/pages/goods_cate/goods_cate.vue
index 3073585..4b3e378 100644
--- a/pages/goods_cate/goods_cate.vue
+++ b/pages/goods_cate/goods_cate.vue
@@ -13,7 +13,7 @@
<scroll-view scroll-y="true" scroll-with-animation='true'
:style="{height: (height-280/750*windowWidth) + 'px'}" :scroll-into-view="'menu_item'+navActive">
<view class='item acea-row row-center-wrapper menu_item' :id="'menu_item'+index"
- :class='index==navActive?"on":""' v-for="(item,index) in categoryList" :key="item._key"
+ :class='index==navActive?"on":""' v-for="(item,index) in categoryList" :key="index"
@click='tap(index,"b"+index)'>
<image v-if="item.extra" class="img" :src="item.extra" mode="aspectFill"></image>
<view class="text">{{item.name}}</view>
@@ -25,7 +25,7 @@
<scroll-view :scroll-into-view="'subMenu_item'+subActive" scroll-x="true" scroll-with-animation='true'
style="width: 100%;">
<view class="subMenu_wrapper">
- <block v-for="(itemn,indexn) in categoryList[navActive].child" :key="itemn._key"><text
+ <block v-for="(itemn,indexn) in categoryList[navActive].child" :key="indexn"><text
class="subMenu_item" :id="'subMenu_item'+indexn" :class='indexn==subActive?"on":""'
@click='tapSub(indexn)'>{{itemn.name}}</text></block>
</view>
@@ -35,15 +35,15 @@
:style="{top: (categoryList[navActive].show2Category==0?0:118) + 'rpx',height: (height-(categoryList[navActive].show2Category==0?0:(122/750*windowWidth))) + 'px'}">
<scroll-view :scroll-top="scrollTop" class="goodlistScroll" scroll-y="true" style="height:100%;"
:scroll-into-view="scrollIntoView" @scroll="handleScroll" :throttle="false">
- <block v-for="(aitem,aindex) in categoryList" :key="aitem._key">
- <view class="list" v-if="aitem.child.length>0" v-for="(sitem,sindex) in aitem.child" :key="sitem._key"
+ <block v-for="(aitem,aindex) in categoryList" :key="aindex">
+ <view class="list" v-if="aitem.child.length>0" v-for="sitem,sindex in aitem.child" :key="sindex"
:style="(aindex==categoryList.length-1&&sindex==aitem.child.length-1)?('min-height:'+(height-370/750*windowWidth)+'px'):''"
:id="'list'+aindex+'_'+sindex">
<view class="list_title">{{sitem.name}}</view>
<view class="list_wrapper cf">
<view class="list_column cfl">
<block style="float:left" v-if="sitem.productArr.length>0"
- v-for="(gitem,gindex) in sitem.productArr" :key="gitem._key">
+ v-for="(gitem,gindex) in sitem.productArr" :key="gindex">
<GoodBlock v-if="gindex%2==0" :size="'small'" :pageName="'鍒嗙被'"
:moduleName="'鍒嗙被鍟嗗搧鍒楄〃'" :careBeanRate="careBeanRate" :goodsInfo="gitem">
</GoodBlock>
@@ -51,7 +51,7 @@
</view>
<view class="list_column cfr">
<block style="float:left" v-if="sitem.productArr.length>0"
- v-for="(gitem,gindex) in sitem.productArr" :key="gitem._key">
+ v-for="(gitem,gindex) in sitem.productArr" :key="gindex">
<GoodBlock v-if="gindex%2==1" :size="'small'" :pageName="'鍒嗙被'"
:moduleName="'鍒嗙被鍟嗗搧鍒楄〃'" :careBeanRate="careBeanRate" :goodsInfo="gitem">
</GoodBlock>
@@ -66,14 +66,14 @@
<view class="list_wrapper cf">
<view class="list_column cfl">
<block v-if="aitem.productArr.length>0" v-for="(gitem,gindex) in aitem.productArr"
- :key="gitem._key">
+ :key="gindex">
<GoodBlock v-if="gindex%2==0" :pageName="'鍒嗙被'" :moduleName="'鍒嗙被鍟嗗搧鍒楄〃'"
:careBeanRate="careBeanRate" :goodsInfo="gitem"></GoodBlock>
</block>
</view>
<view class="list_column cfr">
<block v-if="aitem.productArr.length>0" v-for="(gitem,gindex) in aitem.productArr"
- :key="gitem._key">
+ :key="gindex">
<GoodBlock v-if="gindex%2==1" :pageName="'鍒嗙被'" :moduleName="'鍒嗙被鍟嗗搧鍒楄〃'"
:careBeanRate="careBeanRate" :goodsInfo="gitem"></GoodBlock>
</block>
@@ -144,7 +144,11 @@
totalGetNum: 0,
// 棣栧睆浼樺寲锛氬綋鍓嶅垎绫荤殑寰呭畬鎴愯姹傛暟
catePending: [],
+ // 鏍囪鍚勫垎绫绘槸鍚﹀凡娲惧彂杩囪姹傦紝閬垮厤鍒囨崲鍒嗙被鏃堕噸澶嶈姹�
+ cateStarted: [],
firstScreenReady: true,
+ // 鍚庡彴鍔犺浇鏍囪锛氶灞忔覆鏌撳苟鍏抽棴loading鍚庯紝鎵嶅紑濮嬪悗鍙板姞杞藉叾浣欏垎绫�
+ bgLoaded: false,
// 娓叉煋浼樺寲锛氶潪棣栧睆鍒嗙被鏁版嵁缂撳啿闃熷垪锛屾壒閲忔覆鏌撳噺灏憇etData娆℃暟
deferredLists: [],
deferTimer: null,
@@ -162,6 +166,8 @@
let that = this;
that.menuTop = uni.getMenuButtonBoundingClientRect().top;
that.menuHeight = uni.getMenuButtonBoundingClientRect().height;
+ // 灏芥棭璁＄畻椤甸潰甯冨眬楂樺害锛岄伩鍏嶉灞忔暟鎹氨缁悗鍥� height 涓� 0 鑰岀櫧灞�
+ that.infoScroll();
if (that.$store.getters.careBeanRate) {
that.$nextTick(() => {
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
@@ -176,6 +182,10 @@
});
},
mounted() {},
+ onReady() {
+ // 椤甸潰娓叉煋瀹屾垚鍚庡鏍镐竴娆″竷灞�灏哄锛堝惈婊氬姩鍖哄煙 scrollHeight锛�
+ this.infoScroll();
+ },
onHide() {
let that = this;
if (that.$store.getters.isSystemHide) {
@@ -339,6 +349,10 @@
that.isClicking = true;
that.navActive = index;
that.subActive = 0;
+ // loading鏈熼棿鍒囧埌灏氭湭鍙戣捣璇锋眰鐨勫垎绫绘椂锛岀珛鍗宠ˉ鍙戣姹傦紝閬垮厤loading鍗′綇
+ if (!that.cateStarted[index]) {
+ that.loadCateByIndex(index);
+ }
// loading鏈熼棿鍒囨崲鍒嗙被锛岃嫢鐩爣鍒嗙被宸插姞杞藉畬鎴愬垯绔嬪嵆鍏抽棴loading
that.checkFirstScreen(index);
that.$nextTick(() => {
@@ -352,6 +366,10 @@
let that = this;
that.isClicking = true;
that.subActive = index;
+ // 褰撳墠鍒嗙被灏氭湭鍙戣捣璇锋眰鏃惰ˉ鍙戯紝閬垮厤loading鍗′綇
+ if (!that.cateStarted[that.navActive]) {
+ that.loadCateByIndex(that.navActive);
+ }
that.checkFirstScreen(that.navActive);
that.$nextTick(() => {
that.scrollIntoView = 'list' + that.navActive + '_' + that.subActive;
@@ -391,23 +409,28 @@
let that = this;
that.firstScreenReady = false;
that.allRequestsDone = false;
+ that.bgLoaded = false;
that.deferredLists = [];
if (that.deferTimer) {
clearTimeout(that.deferTimer);
that.deferTimer = null;
}
+ // 鏆備笉鑰冭檻浼犲叆cid鐨勬儏鍐碉細涓�寰嬩粠绗竴涓垎绫诲紑濮嬪姞杞介灞�
+ that.navActive = 0;
+ that.subActive = 0;
uni.showLoading();
getCategoryList().then(res => {
- that.categoryList = res.data;
- // [P0-浼樺寲] 瑁呴厤闃舵涓烘墍鏈夊垎绫昏妭鐐规墦 _key锛屼緵妯℃澘 :key 浣跨敤
- that.ensureCategoryKey(that.categoryList);
+ that.categoryList = res.data || [];
// 閲嶇疆璁℃暟锛岄伩鍏嶉噸澶嶈繘鍏ラ〉闈㈡椂绱Н
that.totalGetNum = 0;
that.finishNum = 0;
that.catePending = [];
+ that.cateStarted = [];
that.categoryList.forEach((item, index) => {
-
if (item.child && item.child.length > 0) {
+ item.child.sort((a, b) => {
+ return a.sort - b.sort;
+ });
that.totalGetNum += item.child.length;
that.catePending[index] = item.child.length;
} else {
@@ -415,113 +438,50 @@
that.catePending[index] = 1;
}
})
-
- // 鍏堟爣璁板綋鍓嶉�変腑鍒嗙被锛屽啀鍙戣捣璇锋眰
- that.categoryList.forEach((item, index) => {
- if (that.optionId && that.optionId == item.id) {
- that.navActive = index;
- that.subActive = 0;
- }
- if (item.child && item.child.length > 0) {
- item.child.sort((a, b) => {
- return a.sort - b.sort;
- });
- item.child.forEach((item2, index2) => {
- if (that.optionId && that.optionId == item2.id) {
- that.navActive = index;
- that.subActive = index2;
- }
- })
- }
+ // 鍒嗙被涓虹┖鏃剁洿鎺ュ叧闂璴oading锛岄伩鍏嶄竴鐩村仠鐣欏湪loading鎬�
+ if (!that.categoryList.length) {
+ that.firstScreenReady = true;
+ that.isLoading = false;
+ uni.hideLoading();
+ return;
+ }
+ // 棣栧睆浼樺寲锛氬厛鍙姹傜涓�涓垎绫伙紝淇濊瘉棣栧睆鏁版嵁鏈�蹇繑鍥炲苟鐩存帴娓叉煋
+ that.loadCateByIndex(that.navActive);
+ // 鍏朵綑鍒嗙被寰呴灞忔覆鏌撱�乴oading鍏抽棴鍚庯紝鐢� loadRestCategory 鍚庡彴閿欏嘲鍔犺浇
+ })
+ },
+ // 鎸夌储寮曞姞杞芥煇涓垎绫讳笅鐨勫晢鍝佹暟鎹紙鍚屼竴鍒嗙被鍙淳鍙戜竴娆★級
+ loadCateByIndex(index) {
+ let that = this;
+ let item = that.categoryList[index];
+ if (!item) return;
+ if (that.cateStarted[index]) return;
+ that.cateStarted[index] = true;
+ if (item.child && item.child.length > 0) {
+ item.child.forEach((item2, index2) => {
+ that.getAllProductList('isSub', index, index2);
})
-
- const loadCate = (index) => {
- let item = that.categoryList[index];
- if (item.child && item.child.length > 0) {
- item.child.forEach((item2, index2) => {
- that.getAllProductList('isSub', index, index2);
- })
- } else {
- that.getAllProductList(false, index);
- }
- };
- // [P0-浼樺寲] 棣栧睆鍒嗙被锛堝綋鍓峮avActive锛夛細绔嬪嵆骞跺彂鍙戣捣锛屼笉璧颁换浣曢槦鍒楋紝鏈�澶ч檺搴︾缉鐭灞� loading 鏃堕暱
- loadCate(that.navActive);
- // [P0-浼樺寲] 鍏朵綑鍒嗙被锛氭瀯寤轰换鍔″垪琛紝璧颁笅鏂瑰苟鍙戦檺娴佹睜锛岄伩鍏嶄竴娆℃�у崰婊� wx.request queue 鎷栨參棣栧睆
- let otherTasks = [];
- that.categoryList.forEach((it, idx) => {
- if (idx !== that.navActive) otherTasks.push({ index: idx });
- });
- that.runCategoryTasksWithLimit(otherTasks, 4);
-
-
- })
- },
- // [P0-浼樺寲] 骞跺彂闄愭祦宸ュ叿锛氶櫎棣栧睆鍒嗙被澶栵紝鍏朵綑鍒嗙被鐨勮姹傜粡鐢辨澶勫彂璧�
- runCategoryTasksWithLimit(tasks, limit) {
- let that = this;
- if (!tasks || !tasks.length) return Promise.resolve();
- const queue = tasks.slice();
- const executing = [];
- const launch = () => {
- while (queue.length && executing.length < limit) {
- const task = queue.shift();
- const item = that.categoryList[task.index];
- if (!item) continue;
- let promise;
- if (item.child && item.child.length > 0) {
- const subPromises = [];
- item.child.forEach((sub, subIdx) => {
- subPromises.push(that.getAllProductList('isSub', task.index, subIdx));
- });
- promise = Promise.all(subPromises);
- } else {
- promise = that.getAllProductList(false, task.index);
- }
- // 鐢� .catch 鍖呬竴灞傞伩鍏嶅崟涓け璐ユ嫋鍨暣姹�
- const tracked = promise.catch(() => {});
- tracked.finally(() => {
- const idx = executing.indexOf(tracked);
- if (idx >= 0) executing.splice(idx, 1);
- }).catch(() => {});
- executing.push(tracked);
- }
- };
- const next = () => {
- launch();
- if (executing.length === 0) return Promise.resolve();
- return Promise.race(executing).then(next, next);
- };
- return next();
- },
- // [P0-浼樺寲] 涓哄垎绫昏妭鐐规墦 _key锛氶潪 H5 骞冲彴鐨� v-for :key 蹇呴』涓虹畝鍗曞彉閲忥紝
- // 鏁呭湪鏁版嵁瑁呴厤闃舵棰勫厛鍦� item 涓婂姞 _key锛屾ā鏉跨敤 :key="item._key" 寮曠敤
- ensureCategoryKey: function(list) {
- if (!Array.isArray(list)) return;
- list.forEach((item, i) => {
- if (!item) return;
- if (item.id != null) item._key = 'c-' + item.id;
- else if (!item._key) item._key = 'c0-' + i;
- if (item.child && item.child.length) {
- item.child.forEach((sub, j) => {
- if (!sub) return;
- if (sub.id != null) sub._key = 's-' + sub.id;
- else if (!sub._key) sub._key = 's0-' + i + '-' + j;
- });
- }
- });
- },
- // [P0-浼樺寲] 涓哄晢鍝佽妭鐐规墦 _key
- ensureProductKey: function(list) {
- if (!Array.isArray(list)) return;
- list.forEach((g, k) => {
- if (!g) return;
- if (g.id != null && !g._key) g._key = 'p-' + g.id;
- else if (!g._key) g._key = 'pk-' + k;
- });
- },
- // 褰撳墠鍒嗙被鏁版嵁鍏ㄩ儴灏辩华鍚庣珛鍗冲叧闂叏灞弆oading锛屼笉蹇呯瓑寰呮墍鏈夊垎绫�
- checkFirstScreen(index1) {
+ } else {
+ that.getAllProductList(false, index);
+ }
+ },
+ // 棣栧睆娓叉煋骞跺叧闂璴oading鍚庯紝鍚庡彴閿欏嘲鍔犺浇鍏朵綑鍒嗙被锛岄伩鍏嶄笌棣栧睆鎶㈣姹�/鎶㈡覆鏌�
+ loadRestCategory() {
+ let that = this;
+ if (that.bgLoaded) return;
+ that.bgLoaded = true;
+ let delay = 0;
+ that.categoryList.forEach((item, index) => {
+ if (index == that.navActive) return;
+ // 姣忎釜鍒嗙被閿欏紑瑙﹀彂锛岄�愭鍦ㄥ悗鍙伴摵寮�锛岄伩鍏嶄竴娆℃�ч摵婊¤姹傞槦鍒�
+ delay += 50;
+ setTimeout(() => {
+ that.loadCateByIndex(index);
+ }, delay);
+ })
+ },
+ // 褰撳墠鍒嗙被鏁版嵁鍏ㄩ儴灏辩华鍚庣珛鍗冲叧闂叏灞弆oading锛屼笉蹇呯瓑寰呮墍鏈夊垎绫�
+ checkFirstScreen(index1) {
let that = this;
if (that.firstScreenReady || index1 != that.navActive) return;
if ((that.catePending[index1] || 0) <= 0) {
@@ -531,6 +491,8 @@
that.$nextTick(() => {
setTimeout(() => {
uni.hideLoading();
+ // 棣栧睆宸叉覆鏌撲笖loading宸插叧闂紝姝ゆ椂鎵嶅紑濮嬪悗鍙板姞杞藉叾浣欏垎绫�
+ that.loadRestCategory();
}, 50)
})
}
@@ -600,7 +562,8 @@
updateDimensions() {
const query = uni.createSelectorQuery().in(this);
query.select('.goodlistScroll').boundingClientRect(data => {
- this.scrollHeight = data.height;
+ // 棣栧睆娓叉煋鍓嶈鑺傜偣鍙兘杩樹笉瀛樺湪锛岄伩鍏嶆姤閿�
+ if (data) this.scrollHeight = data.height;
}).exec();
},
handleScroll(e) {
@@ -631,8 +594,6 @@
cid: isSub ? that.categoryList[index1].child[index2].id : that.categoryList[index1].id,
}).then(res => {
let list = res.data.list;
- // [P0-浼樺寲] 瑁呴厤闃舵涓哄晢鍝佽妭鐐规墦 _key锛屼緵妯℃澘 :key 浣跨敤
- that.ensureProductKey(list);
// 褰撳墠娴忚鍒嗙被鍗虫椂娓叉煋锛涘叾浣欏垎绫昏繘鍏ョ紦鍐查槦鍒楁壒閲忔覆鏌擄紝
// 閬垮厤鍑犲崄娆�$set鍚勮嚜瑙﹀彂涓�娆″叏閲忓垪琛ㄦ覆鏌�
if (index1 == that.navActive && !that.firstScreenReady) {
--
Gitblit v1.4.0