Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(harmony): 商品列表改用 :style 控制显示隐藏，修复鸿蒙下不显示问题

Browse Source 
- 根因：.goods-list 默认 display:none，依赖 .show class 显示
- 鸿蒙 ArkUI 对 :class 动态绑定支持不完善，isList=true 时 .show 未正确添加
- 改用 :style 内联样式控制 display，优先级高于 class 且更可靠
- 同时把 v-for key 从 index 改为 item.id 提升 diff 准确性
- 移除之前无效的 renderKey 强制刷新逻辑
This commit is contained in:
ZF Sun
2026-06-05 11:19:05 +08:00
parent 6027f0d6de
commit 1ab8a52c38
2 changed files with 45 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages_goods/list.vue
View File

@@ -47,8 +47,8 @@
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList"> <mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
<block slot="list"> <block slot="list">
<view class="goods-list single-column" :class="{ show: isList }"> <view class="goods-list single-column" :class="{ show: isList }" :style="{ display: isList ? 'block' : 'none' }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" <view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
@click="toDetail(item)"> @click="toDetail(item)">
<view class="goods-img"> <view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image> <image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image>
@@ -97,8 +97,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="goods-list double-column" :class="{ show: !isList }"> <view class="goods-list double-column" :class="{ show: !isList }" :style="{ display: !isList ? 'flex' : 'none' }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index" <view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
@click="toDetail(item)" @click="toDetail(item)"
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }"> :style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
<view class="goods-img"> <view class="goods-img">

11
pages_goods/public/js/list.js
View File

@@ -259,17 +259,6 @@ export default {
this.goodsList = this.goodsList.concat(newArr); //追加新数据 this.goodsList = this.goodsList.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide(); if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
// #ifdef MP-HARMONY
// 鸿蒙 ArkUI 对 v-for 数组响应式更新支持不完善，强制触发视图刷新
setTimeout(() => {
const temp = this.isList;
this.isList = !temp;
setTimeout(() => {
this.isList = temp;
}, 0);
}, 50);
// #endif
this.waterfallflow((mescroll.num - 1) * 10); this.waterfallflow((mescroll.num - 1) * 10);
}, },
fail: res => { fail: res => {