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 30 border-width: 0;
31 31 }
32 32 .tabBox_main{
  33 + width: 750px;
  34 + height: auto;
33 35 .skeleton {
34 36 &.brief {
35 37 background-color: #ffffff;
... ... @@ -38,12 +40,14 @@
38 40 background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
39 41 }
40 42 &.commodity {
  43 + width: 100%;
  44 + height: 100%;
41 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 3 <!-- 主内容区域 -->
4 4 <van-tabs @change="onChange" swipeable v-model="active">
5 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 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 16 </div>
15   - <!-- 精品推荐 -->
  17 + <!-- 精品推荐 -->
16 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 26 :discountZoneInfo="item">
25   - </discountZone>
26   - </div>
27   - <!-- 商品推荐 -->
  27 + </discountZone>
  28 + </div>
  29 + <!-- 商品推荐 -->
28 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 37 </div>
36 38 </div>
37   - </div>
38 39 </div>
39   - </van-tab>
  40 + </div>
40 41 </van-tabs>
41 42 </div>
42 43 </template>
... ... @@ -56,6 +57,9 @@
56 57 commoditys: { // 全部推荐
57 58 list: []
58 59 },
  60 + swiperExce: { // swiper元素高度，最小高度
  61 + offsetHeight: 0
  62 + },
59 63 paging: { // 分页
60 64 commodity: {
61 65 loading: true,
... ... @@ -86,11 +90,8 @@
86 90 this.tabbaromponents = this.tabbar.find((item)=>{
87 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 170  
170 171 // 设置还有需要加载的内容
171 172 this.$set(this.paging.commodity, "loading", false);
172   - // 页脚加成2
173   - if(this.paging.commodity.page === 1){
  173 + // 如果当前显示“全部商品”，设置swiper高度
174 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 180 } else {
179 181  
180 182 // 没有需要加载的内容，停止上拉加载
... ... @@ -193,20 +195,37 @@
193 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 222 loadCommodity() {
201 223 // 判断是“精品推荐”页才加载
202 224 if (this.tabbaromponents.title === '全部商品' && this.tabbaromponents.shop_id) {
203   - if(this.paging.commodity.page!=1){
204 225 // 设置“精品推荐”页码
205 226 this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);
206   -
207 227 // 调用接口
208 228 this.shopRecommendGoods(this.paging.commodity.page);
209   - }
210 229 }
211 230 },
212 231  
... ...