wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:53:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

【优化】优化栏目页面商品列表瀑布流加载缓慢卡顿的问题。

Browse Source
This commit is contained in:
大灰灰
2022-11-27 01:34:41 +08:00
parent 1f93d06b49
commit fefad18807
1 changed files with 27 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
CoreCms.Net.Uni-App/CoreShop/pages/category/list/list.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="">
<view class="coreshop-bg-white">
<u-toast ref="uToast" /><u-no-network></u-no-network>
<u-navbar :title="title" safeAreaInsetTop fixed placeholder @leftClick="goNavigateBack"></u-navbar>
@@ -85,19 +85,15 @@
</view>
</u-sticky>
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="goodsList" @wapperClick="wapperClick" @imageClick="imageClick">
<!-- #ifdef MP-WEIXIN -->
<view class="goods" v-for="(item,index) in goodsList" :key="index" slot="slot{{index}}">
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
<view class="coreshop-margin-left-10 coreshop-margin-right-10 index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
<view class="flex-box clear-fix">
<view class="coreshop-padding-bottom-10 coreshop-bg-main column-value2" v-for="(item,index) in goodsList" :key="index">
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-main coreshop-border-radius-bl-18" @click="goGoodsDetail(item.id)">
<image :lazy-load="true" :src="item.image" class="img" mode="widthFix"></image>
<view class="coreshop-multiple-line-clamp">
<text class="coreshop-font-14">{{item.name}}</text>
</view>
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
<view class="coreshop-text-red coreshop-font-weight-bold">
<text class="coreshop-font-12">¥</text>
<text class="coreshop-font-16">{{item.price}}</text>
@@ -107,15 +103,18 @@
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
<view class="coreshop-divider" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
<view class="complete"></view>
</view>
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" :class="newData.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
<view>
{{ pointShowName}}兑换价:
</view>
<view class="coreshop-text-red">
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}元
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
</view>
</view>
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
<view>
购买赠送:
</view>
@@ -125,47 +124,8 @@
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<template v-slot:default="item">
<view class="goods">
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
<image class="coreshop-image-recommend-tags" src="/static/images/common/recommend.png" v-if="item.isRecommend"></image>
<image class="coreshop-image-hot-tags" src="/static/images/common/hot.png" v-if="item.isHot"></image>
<text class="coreshop-font-14">{{item.name}}</text>
</view>
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
<view class="coreshop-text-red coreshop-font-weight-bold">
<text class="coreshop-font-12">¥</text>
<text class="coreshop-font-16">{{item.price}}</text>
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
</view>
<view>
<text class="coreshop-font-10 coreshop-text-gray">已售{{item.buyCount+item.initialSales}}{{item.unit}}</text>
</view>
</view>
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
<view>
{{ pointShowName}}兑换价:
</view>
<view class="coreshop-text-red">
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
</view>
</view>
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
<view>
购买赠送:
</view>
<view class="coreshop-text-red">
{{item.points}}{{ pointShowName}}
</view>
</view>
</view>
</view>
</template>
<!-- #endif -->
</custom-waterfalls-flow>
</view>
<u-loadmore :status="loadStatus" :icon-type="loadIconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
</view>
<!-- 无数据时默认显示 -->
@@ -702,5 +662,16 @@
</script>
<style scoped lang="scss">
.flex-box { column-count: 2; column-gap: 8px;
.column-value2 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 8px; }
}
.flex-box3 { column-count: 3; column-gap: 8px;
.column-value3 { width: 100%; break-inside: avoid; color: #333333 !important; margin-bottom: 5px; }
}
.img { width: 100%; }
.clear-fix::after { content: ''; display: block; height: 0; clear: both; }
.clear-fix { zoom: 1; }
@import "list.scss";
</style>