fix(harmony): 双列模式，点击图片等不能进入商品详情页面

components/mescroll/my-list-mescroll.vue

@@ -144,6 +144,14 @@ export default {
 		},
 		listenRefresh() {
 			this.$emit('listenRefresh', true);
+		},
+		/**
+		 * 主动重建 slot DOM。
+		 * 鸿蒙下通过 :key 变化重建的 .goods-item 元素 @click 事件绑定会丢失,
+		 * 通过自增 listSlotKey 走 slot 重建路径可恢复事件绑定。
+		 */
+		forceSlotRebuild() {
+			this.listSlotKey = (this.listSlotKey || 0) + 1;
 		}
 	}
 };

pages_goods/list.vue

@@ -47,7 +47,7 @@
 
 		<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
 			<block slot="list">
-			<view class="goods-list single-column" :class="{ show: isList }" :style="{ display: isList ? 'block' : 'none' }">
+			<view v-if="isList" class="goods-list single-column" :class="{ show: isList }">
 				<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
 					@click="toDetail(item)">
 					<view class="goods-img">
@@ -97,10 +97,8 @@
 					</view>
 				</view>
 			</view>
-			<view class="goods-list double-column" :class="{ show: !isList }" :style="{ display: !isList ? 'flex' : 'none' }">
+			<view v-if="!isList" class="goods-list double-column" :class="{ show: !isList }">
-				<!-- 鸿蒙下双列 items 一直在 display:none 状态下渲染,首次切换时尺寸测量不对导致瀑布流错位
+				<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
-				     :key 加 isList 前缀强制重建 DOM (goodsItemKey 内有条件编译,H5/微信走原样) -->
-				<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="goodsItemKey(item)"
 					@click="toDetail(item)"
 					:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
 						<view class="goods-img">

pages_goods/public/js/list.js

@@ -298,6 +298,14 @@ export default {
 		},
 		changeListStyle() {
 			this.isList = !this.isList;
+			// 鸿蒙下 isList 切换导致 :key 变化、DOM 重建,重建出来的 .goods-item @click 事件绑定会丢失
+			// 主动触发 slot 重建,把事件绑定带回来
+			// #ifdef MP-HARMONY
+			const mescroll = this.$refs.mescroll;
+			if (mescroll && typeof mescroll.forceSlotRebuild === 'function') {
+				mescroll.forceSlotRebuild();
+			}
+			// #endif
 			this.waterfallflow(0);
 		},
 		//筛选点击
@@ -489,20 +497,6 @@ export default {
 		},
 		genNonDuplicate(len = 6) {
 			return Number(Math.random().toString().substr(3, len) + Date.now()).toString(36);
-		},
-		/**
-		 * 鸿蒙下双列 items 一直在 display:none 状态下渲染,首次切换时尺寸测量不对导致瀑布流错位
-		 * 通过 :key 加 isList 前缀,切换模式时强制重建 DOM,新 DOM 在可见状态下生成,测量正确
-		 * H5/微信不受影响,走原 item.id
-		 */
-		goodsItemKey(item) {
-			// #ifdef MP-HARMONY
-			return (this.isList ? 's-' : 'd-') + item.id;
-			// #endif
-
-			// #ifndef MP-HARMONY
-			return item.id;
-			// #endif
 		}
 	}
 }