fix(harmony): 商品列表改用 :style 控制显示隐藏，修复鸿蒙下不显示问题
- 根因：.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:
@@ -47,60 +47,60 @@
|
|||||||
|
|
||||||
<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>
|
||||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
||||||
</view>
|
</view>
|
||||||
<view class="sell-out" v-if="item.goods_stock <= 0">
|
<view class="sell-out" v-if="item.goods_stock <= 0">
|
||||||
<text class="iconfont icon-shuqing"></text>
|
<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>
|
</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>
|
</view>
|
||||||
|
</view>
|
||||||
<view class="lineheight-clear">
|
<view class="ai-chat-btn-wrap" v-if="item.isinformation == 1">
|
||||||
<view class="discount-price" v-if="item.isinformation == 0">
|
<view class="ai-chat-btn" @click.stop="sendToAIChat(item)">
|
||||||
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
|
{{ $lang('consult') }}
|
||||||
<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>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="goods-list double-column" :class="{ show: !isList }">
|
</view>
|
||||||
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index"
|
<view class="goods-list double-column" :class="{ show: !isList }" :style="{ display: !isList ? 'flex' : 'none' }">
|
||||||
@click="toDetail(item)"
|
<view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="item.id"
|
||||||
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
|
@click="toDetail(item)"
|
||||||
|
:style="{ left: listPosition[index] ? listPosition[index].left : '', top: listPosition[index] ? listPosition[index].top : '' }">
|
||||||
<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>
|
||||||
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
Reference in New Issue
Block a user