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

90
pages_goods/list.vue
View File

@@ -47,60 +47,60 @@
<mescroll-uni top="180" ref="mescroll" @getData="getGoodsList">
<block slot="list">
<view class="goods-list single-column" :class="{ show: isList }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
@click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
</view>
<view class="sell-out" v-if="item.goods_stock <= 0">
<text class="iconfont icon-shuqing"></text>
<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="item.id"
@click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
</view>
<view class="sell-out" v-if="item.goods_stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name"
:class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name"
:class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
<view class="lineheight-clear">
<view class="discount-price" v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</view>
</view>
<view class="pro-info" v-if="item.isinformation == 0">
<view class="block-wrap">
<view class="sale" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit
? item.unit : '件' }}</view>
</view>
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
<view class="cart buy-btn click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
{{ $lang('buy') }}
<view class="click-event"></view>
</view>
</view>
<view class="lineheight-clear">
<view class="discount-price" v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{
parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{
parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</view>
</view>
<view class="pro-info" v-if="item.isinformation == 0">
<view class="block-wrap">
<view class="sale" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit
? item.unit : '件' }}</view>
</view>
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
<view class="cart buy-btn click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
{{ $lang('buy') }}
<view class="click-event"></view>
</view>
</view>
</view>
<view class="ai-chat-btn-wrap" v-if="item.isinformation == 1">
<view class="ai-chat-btn" @click.stop="sendToAIChat(item)">
{{ $lang('consult') }}
</view>
</view>
<view class="ai-chat-btn-wrap" v-if="item.isinformation == 1">
<view class="ai-chat-btn" @click.stop="sendToAIChat(item)">
{{ $lang('consult') }}
</view>
</view>
</view>
</view>
<view class="goods-list double-column" :class="{ show: !isList }">
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
@click="toDetail(item)"
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
</view>
<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="item.id"
@click="toDetail(item)"
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress ></image>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}

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

@@ -259,17 +259,6 @@ export default {
this.goodsList = this.goodsList.concat(newArr); //追加新数据
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);
},
fail: res => {