diff --git a/components/mescroll/my-list-mescroll.vue b/components/mescroll/my-list-mescroll.vue index d48279f..d0d2935 100644 --- a/components/mescroll/my-list-mescroll.vue +++ b/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; } } }; diff --git a/pages_goods/list.vue b/pages_goods/list.vue index 4c93212..1e0f8b9 100644 --- a/pages_goods/list.vue +++ b/pages_goods/list.vue @@ -47,7 +47,7 @@ - + @@ -97,10 +97,8 @@ - - - + diff --git a/pages_goods/public/js/list.js b/pages_goods/public/js/list.js index e9fd52b..137c5fd 100644 --- a/pages_goods/public/js/list.js +++ b/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 } } } \ No newline at end of file