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 <template> 1 <template>
2 - <div> 2 + <div class="fans-shop-message-list-box">
3 3
4 <!-- nav --> 4 <!-- nav -->
5 <back-box @back="back" 5 <back-box @back="back"
6 :backs="backs"> 6 :backs="backs">
7 </back-box> 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 </div> 26 </div>
23 </template> 27 </template>
24 28
@@ -33,7 +37,8 @@ @@ -33,7 +37,8 @@
33 data() { 37 data() {
34 return { 38 return {
35 title: "", 39 title: "",
36 - backs: { 40 + isLoading: false, // 下拉刷新控制
  41 + backs: { // nav导航条数据
37 title: "已关注达人", 42 title: "已关注达人",
38 funcs: { 43 funcs: {
39 back: { 44 back: {
@@ -59,6 +64,16 @@ @@ -59,6 +64,16 @@
59 }, 64 },
60 methods: { 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,8 +100,13 @@
85 * @param {object} ext [扩展参数] 100 * @param {object} ext [扩展参数]
86 */ 101 */
87 fansShopMessageListCallback(res, ext) { 102 fansShopMessageListCallback(res, ext) {
  103 +
88 // 加载完成 104 // 加载完成
89 Indicator.close(); 105 Indicator.close();
  106 +
  107 + // 下拉刷新结束
  108 + this.$set(this, "isLoading", false);
  109 +
90 // 返回处理 110 // 返回处理
91 if (res.code == 200) { 111 if (res.code == 200) {
92 112
src/pages/mall/mall.less
  View file @821bd7d
1 .mall-box { 1 .mall-box {
2 margin-top: 20px; 2 margin-top: 20px;
3 -}  
4 \ No newline at end of file 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 <template> 1 <template>
2 <div class="mall-box"> 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 </div> 41 </div>
38 - </div> 42 + </van-pull-refresh>
39 </div> 43 </div>
40 </template> 44 </template>
41 45
@@ -49,14 +53,16 @@ @@ -49,14 +53,16 @@
49 import videoArea from "@/components/videoArea/videoArea"; 53 import videoArea from "@/components/videoArea/videoArea";
50 import style7 from "@/components/style_7/style_7"; 54 import style7 from "@/components/style_7/style_7";
51 import horizList from "@/components/horizList/horizList"; 55 import horizList from "@/components/horizList/horizList";
  56 +
52 export default { 57 export default {
53 name: 'mall', 58 name: 'mall',
54 data() { 59 data() {
55 return { 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 components:{ 68 components:{
@@ -75,6 +81,16 @@ @@ -75,6 +81,16 @@
75 }, 81 },
76 methods: { 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,6 +117,9 @@
101 // 加载完成 117 // 加载完成
102 Indicator.close(); 118 Indicator.close();
103 119
  120 + // 下拉刷新结束
  121 + this.$set(this, "isLoading", false);
  122 +
104 // 返回处理 123 // 返回处理
105 if (res.code == 200) { 124 if (res.code == 200) {
106 125
src/pages/optimization/optimization.less
  View file @821bd7d
@@ -2,6 +2,13 @@ @@ -2,6 +2,13 @@
2 2
3 .optimization-box { 3 .optimization-box {
4 margin-top: 30px; 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 .goods-list-box { 12 .goods-list-box {
6 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%); 13 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 10%, rgba(249, 249, 249, 1) 100%);
7 padding: 30px 0 50px 0; 14 padding: 30px 0 50px 0;
src/pages/optimization/optimization.vue
  View file @821bd7d
1 <template> 1 <template>
2 <div class="optimization-box"> 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 </div> 89 </div>
86 </template> 90 </template>
87 91
@@ -95,9 +99,11 @@ @@ -95,9 +99,11 @@
95 import textTitleBox from "@/components/textTitleBox/textTitleBox"; 99 import textTitleBox from "@/components/textTitleBox/textTitleBox";
96 100
97 export default { 101 export default {
  102 + name: 'optimization',
98 data () { 103 data () {
99 return { 104 return {
100 title: "", 105 title: "",
  106 + isLoading: false, // 下拉刷新控制
101 dresserList: null, // 达人列表 107 dresserList: null, // 达人列表
102 hotGoods: null, // 热销商品 108 hotGoods: null, // 热销商品
103 hotGoodsMore: null, // 热销商品更多 109 hotGoodsMore: null, // 热销商品更多
@@ -123,6 +129,16 @@ @@ -123,6 +129,16 @@
123 }, 129 },
124 methods: { 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,6 +170,9 @@
154 // 加载完成 170 // 加载完成
155 Indicator.close(); 171 Indicator.close();
156 172
  173 + // 下拉刷新结束
  174 + this.$set(this, "isLoading", false);
  175 +
157 // 返回处理 176 // 返回处理
158 if (res.code == 200) { 177 if (res.code == 200) {
159 178