w-front-end / select_good · Commits

Commit 821bd7dee4197d9ec2af3be024796cec5ff15dd5

Authored by 王强
1 parent eee65105

所有页面添加下拉刷新

Inline Side-by-side
Showing 6 changed files with 226 additions and 145 deletions
src/pages/fansShopMessageList/fansShopMessageList.less
  View file @821bd7d
1   -.title{
2   - margin: 30px;
3   - height:50px;
4   - font-size:36px;
5   - font-weight:600;
6   - color:rgba(74,74,74,1);
7   - line-height:50px;
8   -}
9   -.item_box{
10   - height: calc(100vh-110px);
11   - width: 100%;
12   - overflow-y: auto;
  1 +.fans-shop-message-list-box {
  2 + /deep/ .van-pull-refresh {
  3 + .van-pull-refresh__track {
  4 + .van-pull-refresh__head {
  5 + font-size: 30px;
  6 + }
  7 + }
  8 + }
  9 + .title{
  10 + margin: 30px;
  11 + height:50px;
  12 + font-size:36px;
  13 + font-weight:600;
  14 + color:rgba(74,74,74,1);
  15 + line-height:50px;
  16 + }
  17 + .item_box{
  18 + height: calc(100vh-110px);
  19 + width: 100%;
  20 + overflow-y: auto;
  21 + }
13 22 }
... ...
src/pages/fansShopMessageList/fansShopMessageList.vue
  View file @821bd7d
1 1 <template>
2   - <div>
  2 + <div class="fans-shop-message-list-box">
3 3  
4 4 <!-- nav -->
5 5 <back-box @back="back"
6 6 :backs="backs">
7 7 </back-box>
8 8  
9   - <!-- 已关注达人列表 -->
10   - <div class="item_box">
11   - <ul
12   - v-infinite-scroll="loadMore"
13   - infinite-scroll-disabled="loading"
14   - :infinite-scroll-distance="list.length">
15   - <li v-for="(item, index) in list" :key="index" @click="$parent.toDetail(item)">
16   - <dresserList
17   - :dresserList="item">
18   - </dresserList>
19   - </li>
20   - </ul>
21   - </div>
  9 + <!-- 下拉刷新 -->
  10 + <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh">
  11 +
  12 + <!-- 已关注达人列表 -->
  13 + <div class="item_box">
  14 + <ul
  15 + v-infinite-scroll="loadMore"
  16 + infinite-scroll-disabled="loading"
  17 + :infinite-scroll-distance="list.length">
  18 + <li v-for="(item, index) in list" :key="index" @click="$parent.toDetail(item)">
  19 + <dresserList
  20 + :dresserList="item">
  21 + </dresserList>
  22 + </li>
  23 + </ul>
  24 + </div>
  25 + </van-pull-refresh>
22 26 </div>
23 27 </template>
24 28  
... ... @@ -33,7 +37,8 @@
33 37 data() {
34 38 return {
35 39 title: "",
36   - backs: {
  40 + isLoading: false, // 下拉刷新控制
  41 + backs: { // nav导航条数据
37 42 title: "已关注达人",
38 43 funcs: {
39 44 back: {
... ... @@ -59,6 +64,16 @@
59 64 },
60 65 methods: {
61 66  
  67 + // 下拉刷新
  68 + onRefresh() {
  69 +
  70 + // 下拉刷新中
  71 + this.$set(this, "isLoading", true);
  72 +
  73 + // 获取关注人列表
  74 + this.fansShopMessageList();
  75 + },
  76 +
62 77 /**
63 78 * 已关注达人列表
64 79 */
... ... @@ -85,8 +100,13 @@
85 100 * @param {object} ext [扩展参数]
86 101 */
87 102 fansShopMessageListCallback(res, ext) {
  103 +
88 104 // 加载完成
89 105 Indicator.close();
  106 +
  107 + // 下拉刷新结束
  108 + this.$set(this, "isLoading", false);
  109 +
90 110 // 返回处理
91 111 if (res.code == 200) {
92 112  
... ...
src/pages/mall/mall.less
  View file @821bd7d
1 1 .mall-box {
2 2 margin-top: 20px;
3   -}
4 3 \ No newline at end of file
  4 + /deep/ .van-pull-refresh {
  5 + .van-pull-refresh__track {
  6 + .van-pull-refresh__head {
  7 + font-size: 30px;
  8 + }
  9 + }
  10 + }
  11 +}
... ...
src/pages/mall/mall.vue
  View file @821bd7d
1 1 <template>
2 2 <div class="mall-box">
3 3  
4   - <!--轮播-->
5   - <swiper v-if="banner"
6   - :swipers="banner">
7   - </swiper>
8   -
9   - <!--导航-->
10   - <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
11   - :lists="navs"
12   - com="4">
13   - </horiz-list>
14   - <!-- 遍历ads，输出列表数据 -->
15   - <div class="ads-box">
16   - <div class="ads" v-for="(item, index) in ads" :key="index">
17   -
18   - <!--优惠专区-->
19   - <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
20   - :discountZoneInfo="item">
21   - </discountZone>
22   -
23   - <!--天天特惠-->
24   - <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
25   - :preferentialInfo="item">
26   - </preferential>
27   -
28   - <!--视听专区-->
29   - <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
30   - :videoAreaInfo="item">
31   - </videoArea>
32   -
33   - <!-- style_7组件 -->
34   - <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump=jump @addCart=addCart
35   - :styles="item">
36   - </style-7>
  4 + <!-- 下拉刷新 -->
  5 + <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh">
  6 +
  7 + <!--轮播-->
  8 + <swiper v-if="banner"
  9 + :swipers="banner">
  10 + </swiper>
  11 +
  12 + <!--导航-->
  13 + <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
  14 + :lists="navs"
  15 + com="4">
  16 + </horiz-list>
  17 + <!-- 遍历ads，输出列表数据 -->
  18 + <div class="ads-box">
  19 + <div class="ads" v-for="(item, index) in ads" :key="index">
  20 +
  21 + <!--优惠专区-->
  22 + <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
  23 + :discountZoneInfo="item">
  24 + </discountZone>
  25 +
  26 + <!--天天特惠-->
  27 + <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
  28 + :preferentialInfo="item">
  29 + </preferential>
  30 +
  31 + <!--视听专区-->
  32 + <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
  33 + :videoAreaInfo="item">
  34 + </videoArea>
  35 +
  36 + <!-- style_7组件 -->
  37 + <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump=jump @addCart=addCart
  38 + :styles="item">
  39 + </style-7>
  40 + </div>
37 41 </div>
38   - </div>
  42 + </van-pull-refresh>
39 43 </div>
40 44 </template>
41 45  
... ... @@ -49,14 +53,16 @@
49 53 import videoArea from "@/components/videoArea/videoArea";
50 54 import style7 from "@/components/style_7/style_7";
51 55 import horizList from "@/components/horizList/horizList";
  56 +
52 57 export default {
53 58 name: 'mall',
54 59 data() {
55 60 return {
56   - title: "", // 标题
57   - banner:null, // banner
58   - navs: null, // 导航
59   - ads: null // 列表
  61 + title: "", // 标题
  62 + isLoading: false, // 下拉刷新控制
  63 + banner:null, // banner
  64 + navs: null, // 导航
  65 + ads: null // 列表
60 66 }
61 67 },
62 68 components:{
... ... @@ -75,6 +81,16 @@
75 81 },
76 82 methods: {
77 83  
  84 + // 下拉刷新
  85 + onRefresh() {
  86 +
  87 + // 下拉刷新中
  88 + this.$set(this, "isLoading", true);
  89 +
  90 + // 获取优选库精选活动
  91 + this.activityAd();
  92 + },
  93 +
78 94 /**
79 95 * 获取优选库精选活动
80 96 */
... ... @@ -101,6 +117,9 @@
101 117 // 加载完成
102 118 Indicator.close();
103 119  
  120 + // 下拉刷新结束
  121 + this.$set(this, "isLoading", false);
  122 +
104 123 // 返回处理
105 124 if (res.code == 200) {
106 125  
... ...
src/pages/optimization/optimization.less
  View file @821bd7d
... ... @@ -2,6 +2,13 @@
2 2  
3 3 .optimization-box {
4 4 margin-top: 30px;
  5 + /deep/ .van-pull-refresh {
  6 + .van-pull-refresh__track {
  7 + .van-pull-refresh__head {
  8 + font-size: 30px;
  9 + }
  10 + }
  11 + }
5 12 .goods-list-box {
6 13 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%);
7 14 padding: 30px 0 50px 0;
... ...
src/pages/optimization/optimization.vue
  View file @821bd7d
1 1 <template>
2 2 <div class="optimization-box">
3 3  
4   - <!-- 标题 -->
5   - <text-title-box @more="h5More()"
6   - :titles="{
7   - title: '已关注达人',
8   - more: newGoodsMore
9   - }">
10   - </text-title-box>
11   -
12   - <!-- 已关注达人列表（4条） -->
13   - <div v-if="index < 4" v-for="(item, index) in dresserList" :key="index">
14   - <dresserList
15   - :dresserList="item">
16   - </dresserList>
17   - </div>
18   -
19   - <!-- 商品部分 -->
20   - <div class="goods-list-box">
21   -
22   - <!-- 商品样式 2 横排flex -->
23   - <horiz-list-flex class="components-box" v-if="hotGoods && hotGoods.length" @jump="jump"
24   - :lists="hotGoods"
25   - com="2"
26   - pid="2"
27   - :flags="{
28   - icon: [
29   - 'static/img/icon_n1.png',
30   - 'static/img/icon_n2.png',
31   - 'static/img/icon_n3.png'
32   - ]
  4 + <!-- 下拉刷新 -->
  5 + <van-pull-refresh v-model="isLoading" pulling-text="下拉刷新..." loosing-text="释放刷新" loading-text="加载中..." success-text="刷新成功" @refresh="onRefresh">
  6 +
  7 + <!-- 标题 -->
  8 + <text-title-box @more="h5More()"
  9 + :titles="{
  10 + title: '已关注达人',
  11 + more: newGoodsMore
33 12 }">
34   -
35   - <!-- 标题 -->
36   - <text-title-box slot="title-box" @more="more"
37   - :titles="{
38   - title: '热销商品',
39   - more: hotGoodsMore
40   - }">
41   - </text-title-box>
42   - </horiz-list-flex>
43   -
44   - <!-- 商品样式 3 滑动 -->
45   - <horiz-list class="components-box" v-if="newGoods && newGoods.length" @jump="jump" @primary="primary"
46   - :lists="newGoods"
47   - com="3">
48   -
49   - <!-- 标题 -->
50   - <text-title-box slot="title-box" @more="more"
51   - :titles="{
52   - title: '最新上架',
53   - more: newGoodsMore
54   - }">
55   - </text-title-box>
56   - </horiz-list>
57   -
58   - <!-- 商品样式 2 滑动 -->
59   - <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
60   - :lists="newBuyGoods"
61   - com="2"
62   - pid="1">
63   -
64   - <!-- 标题 -->
65   - <text-title-box slot="title-box"
66   - :titles="{
67   - title: '最近购买'
  13 + </text-title-box>
  14 +
  15 + <!-- 已关注达人列表（4条） -->
  16 + <div v-if="index < 4" v-for="(item, index) in dresserList" :key="index">
  17 + <dresserList
  18 + :dresserList="item">
  19 + </dresserList>
  20 + </div>
  21 +
  22 + <!-- 商品部分 -->
  23 + <div class="goods-list-box">
  24 +
  25 + <!-- 商品样式 2 横排flex -->
  26 + <horiz-list-flex class="components-box" v-if="hotGoods && hotGoods.length" @jump="jump"
  27 + :lists="hotGoods"
  28 + com="2"
  29 + pid="2"
  30 + :flags="{
  31 + icon: [
  32 + 'static/img/icon_n1.png',
  33 + 'static/img/icon_n2.png',
  34 + 'static/img/icon_n3.png'
  35 + ]
68 36 }">
69   - </text-title-box>
70   - </horiz-list>
71   -
72   - <!-- 商品样式 3 滑动 -->
73   - <horiz-list class="components-box" v-if="recommendGoods && recommendGoods.length" @jump="jump" @primary="primary"
74   - :lists="recommendGoods"
75   - com="3">
76   -
77   - <!-- 标题 -->
78   - <text-title-box slot="title-box"
79   - :titles="{
80   - title: '猜你喜欢'
81   - }">
82   - </text-title-box>
83   - </horiz-list>
84   - </div>
  37 +
  38 + <!-- 标题 -->
  39 + <text-title-box slot="title-box" @more="more"
  40 + :titles="{
  41 + title: '热销商品',
  42 + more: hotGoodsMore
  43 + }">
  44 + </text-title-box>
  45 + </horiz-list-flex>
  46 +
  47 + <!-- 商品样式 3 滑动 -->
  48 + <horiz-list class="components-box" v-if="newGoods && newGoods.length" @jump="jump" @primary="primary"
  49 + :lists="newGoods"
  50 + com="3">
  51 +
  52 + <!-- 标题 -->
  53 + <text-title-box slot="title-box" @more="more"
  54 + :titles="{
  55 + title: '最新上架',
  56 + more: newGoodsMore
  57 + }">
  58 + </text-title-box>
  59 + </horiz-list>
  60 +
  61 + <!-- 商品样式 2 滑动 -->
  62 + <horiz-list class="components-box" v-if="newBuyGoods && newBuyGoods.length" @jump="jump"
  63 + :lists="newBuyGoods"
  64 + com="2"
  65 + pid="1">
  66 +
  67 + <!-- 标题 -->
  68 + <text-title-box slot="title-box"
  69 + :titles="{
  70 + title: '最近购买'
  71 + }">
  72 + </text-title-box>
  73 + </horiz-list>
  74 +
  75 + <!-- 商品样式 3 滑动 -->
  76 + <horiz-list class="components-box" v-if="recommendGoods && recommendGoods.length" @jump="jump" @primary="primary"
  77 + :lists="recommendGoods"
  78 + com="3">
  79 +
  80 + <!-- 标题 -->
  81 + <text-title-box slot="title-box"
  82 + :titles="{
  83 + title: '猜你喜欢'
  84 + }">
  85 + </text-title-box>
  86 + </horiz-list>
  87 + </div>
  88 + </van-pull-refresh>
85 89 </div>
86 90 </template>
87 91  
... ... @@ -95,9 +99,11 @@
95 99 import textTitleBox from "@/components/textTitleBox/textTitleBox";
96 100  
97 101 export default {
  102 + name: 'optimization',
98 103 data () {
99 104 return {
100 105 title: "",
  106 + isLoading: false, // 下拉刷新控制
101 107 dresserList: null, // 达人列表
102 108 hotGoods: null, // 热销商品
103 109 hotGoodsMore: null, // 热销商品更多
... ... @@ -123,6 +129,16 @@
123 129 },
124 130 methods: {
125 131  
  132 + // 下拉刷新
  133 + onRefresh() {
  134 +
  135 + // 下拉刷新中
  136 + this.$set(this, "isLoading", true);
  137 +
  138 + // 优选页面接口
  139 + this.fansShopMessageList();
  140 + },
  141 +
126 142 /**
127 143 * 优选页面接口
128 144 */
... ... @@ -154,6 +170,9 @@
154 170 // 加载完成
155 171 Indicator.close();
156 172  
  173 + // 下拉刷新结束
  174 + this.$set(this, "isLoading", false);
  175 +
157 176 // 返回处理
158 177 if (res.code == 200) {
159 178  
... ...