w-front-end / select_good · Commits

Commit b24ebedc24e7d232a6e14d021ca27fad3631e6b6

Authored by zhiyangdu
1 parent 3c305c67

数据加载优化

Inline Side-by-side
Showing 2 changed files with 66 additions and 43 deletions
src/components/tabBox/tabBox.less
  View file @b24ebed
@@ -30,6 +30,8 @@ @@ -30,6 +30,8 @@
30 border-width: 0; 30 border-width: 0;
31 } 31 }
32 .tabBox_main{ 32 .tabBox_main{
  33 + width: 750px;
  34 + height: auto;
33 .skeleton { 35 .skeleton {
34 &.brief { 36 &.brief {
35 background-color: #ffffff; 37 background-color: #ffffff;
@@ -38,12 +40,14 @@ @@ -38,12 +40,14 @@
38 background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%); 40 background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
39 } 41 }
40 &.commodity { 42 &.commodity {
  43 + width: 100%;
  44 + height: 100%;
41 background-color: #F9F9F9; 45 background-color: #F9F9F9;
42 - .column-commodity-excessive {  
43 - background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);  
44 - width: 750px;  
45 - height: 30px;  
46 - } 46 + //.column-commodity-excessive {
  47 + // background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
  48 + // width: 750px;
  49 + // height: 30px;
  50 + //}
47 } 51 }
48 } 52 }
49 } 53 }
src/components/tabBox/tabBox.vue
  View file @b24ebed
@@ -3,40 +3,41 @@ @@ -3,40 +3,41 @@
3 <!-- 主内容区域 --> 3 <!-- 主内容区域 -->
4 <van-tabs @change="onChange" swipeable v-model="active"> 4 <van-tabs @change="onChange" swipeable v-model="active">
5 <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title"> 5 <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title">
6 - <div class="tabBox_main">  
7 - <div class="tabbar" v-for="(item, index) in tabbaromponents.ads" :key="index"> 6 +
  7 + </van-tab>
  8 + <div class="tabBox_main" :style="{height: swiperExce.offsetHeight + 'px', minHeight: 'calc(100vh - ' + ($parent.$parent.top.value + 'px') + ' - 38.1vh)'}" ref="tabsSwiperBox">
  9 + <div class="tabbar" v-for="(item, index) in tabbaromponents.ads" :key="index">
8 <!-- 关爱屋简介 --> 10 <!-- 关爱屋简介 -->
9 <div class="skeleton brief" ref="brief"> 11 <div class="skeleton brief" ref="brief">
10 - <html-box  
11 - v-if="item.style === '14'"  
12 - :htmls="item.content">  
13 - </html-box> 12 + <html-box
  13 + v-if="item.style === '14'"
  14 + :htmls="item.content">
  15 + </html-box>
14 </div> 16 </div>
15 - <!-- 精品推荐 --> 17 + <!-- 精品推荐 -->
16 <div class="skeleton boutique" ref="boutique"> 18 <div class="skeleton boutique" ref="boutique">
17 - <img-list-box  
18 - v-if="item.style === '12'"  
19 - @detail="toDetail"  
20 - :imgLists="item.img">  
21 - </img-list-box>  
22 - <!--优惠专区-->  
23 - <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail" 19 + <img-list-box
  20 + v-if="item.style === '12'"
  21 + @detail="toDetail"
  22 + :imgLists="item.img">
  23 + </img-list-box>
  24 + <!--优惠专区-->
  25 + <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
24 :discountZoneInfo="item"> 26 :discountZoneInfo="item">
25 - </discountZone>  
26 - </div>  
27 - <!-- 商品推荐 --> 27 + </discountZone>
  28 + </div>
  29 + <!-- 商品推荐 -->
28 <div class="skeleton commodity" ref="commodity"> 30 <div class="skeleton commodity" ref="commodity">
29 - <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">  
30 - <column-commodity-list-box  
31 - v-if="item.style === '15'"  
32 - @detail="toCommodityDetail"  
33 - :columnLists="commoditys">  
34 - </column-commodity-list-box> 31 + <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">
  32 + <column-commodity-list-box
  33 + v-if="item.style === '15'"
  34 + @detail="toCommodityDetail"
  35 + :columnLists="commoditys">
  36 + </column-commodity-list-box>
35 </div> 37 </div>
36 </div> 38 </div>
37 - </div>  
38 </div> 39 </div>
39 - </van-tab> 40 + </div>
40 </van-tabs> 41 </van-tabs>
41 </div> 42 </div>
42 </template> 43 </template>
@@ -56,6 +57,9 @@ @@ -56,6 +57,9 @@
56 commoditys: { // 全部推荐 57 commoditys: { // 全部推荐
57 list: [] 58 list: []
58 }, 59 },
  60 + swiperExce: { // swiper元素高度，最小高度
  61 + offsetHeight: 0
  62 + },
59 paging: { // 分页 63 paging: { // 分页
60 commodity: { 64 commodity: {
61 loading: true, 65 loading: true,
@@ -86,11 +90,8 @@ @@ -86,11 +90,8 @@
86 this.tabbaromponents = this.tabbar.find((item)=>{ 90 this.tabbaromponents = this.tabbar.find((item)=>{
87 return item.title === title 91 return item.title === title
88 }); 92 });
89 -// if(title==='全部商品'){  
90 -// // 爱心屋项目全部商品  
91 -// this.shopRecommendGoods(this.paging.commodity.page);  
92 -// }  
93 - 93 + // 设置swiper高度
  94 + this.setSwiperHeight(title);
94 }, 95 },
95 /** 96 /**
96 * 调用通用跳转 97 * 调用通用跳转
@@ -169,12 +170,13 @@ @@ -169,12 +170,13 @@
169 170
170 // 设置还有需要加载的内容 171 // 设置还有需要加载的内容
171 this.$set(this.paging.commodity, "loading", false); 172 this.$set(this.paging.commodity, "loading", false);
172 - // 页脚加成2  
173 - if(this.paging.commodity.page === 1){ 173 + // 如果当前显示“全部商品”，设置swiper高度
174 this.$nextTick(() => { 174 this.$nextTick(() => {
175 - this.paging.commodity.page = 2; 175 + setTimeout(() => {
  176 + // 重新设置swiper高度
  177 + this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity[0].offsetHeight);
  178 + }, 500);
176 }); 179 });
177 - }  
178 } else { 180 } else {
179 181
180 // 没有需要加载的内容，停止上拉加载 182 // 没有需要加载的内容，停止上拉加载
@@ -193,20 +195,37 @@ @@ -193,20 +195,37 @@
193 Toast("获取商品推荐失败"); 195 Toast("获取商品推荐失败");
194 } 196 }
195 }, 197 },
196 - 198 + /**
  199 + * 设置swiper高度
  200 + */
  201 + setSwiperHeight(title) {
  202 +
  203 + this.$nextTick(() => {
  204 +
  205 + // 设置swiper高度
  206 + switch (title) {
  207 + case '关爱屋':
  208 + this.$set(this.swiperExce, "offsetHeight", this.$refs.brief[0].offsetHeight);
  209 + break;
  210 + case '精品推荐':
  211 + this.$set(this.swiperExce, "offsetHeight", this.$refs.boutique[0].offsetHeight);
  212 + break;
  213 + case '全部商品':
  214 + this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity[0].offsetHeight);
  215 + break;
  216 + }
  217 + });
  218 + },
197 /** 219 /**
198 * 上拉加载“爱心屋项目全部商品” 220 * 上拉加载“爱心屋项目全部商品”
199 */ 221 */
200 loadCommodity() { 222 loadCommodity() {
201 // 判断是“精品推荐”页才加载 223 // 判断是“精品推荐”页才加载
202 if (this.tabbaromponents.title === '全部商品' && this.tabbaromponents.shop_id) { 224 if (this.tabbaromponents.title === '全部商品' && this.tabbaromponents.shop_id) {
203 - if(this.paging.commodity.page!=1){  
204 // 设置“精品推荐”页码 225 // 设置“精品推荐”页码
205 this.$set(this.paging.commodity, "page", ++this.paging.commodity.page); 226 this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);
206 -  
207 // 调用接口 227 // 调用接口
208 this.shopRecommendGoods(this.paging.commodity.page); 228 this.shopRecommendGoods(this.paging.commodity.page);
209 - }  
210 } 229 }
211 }, 230 },
212 231