组件优化

zhiyangdu
1 parent 745a895f
Showing 3 changed files with 34 additions and 49 deletions
src/components/dresserList/dresserList.vue
src/pages/fansShopMessageList/fansShopMessageList.vue
src/pages/recommendMore/recommendMore.vue
 <template>
     <div>
-        <div class="item_box" @click="toDetail(dresserList)">
-            <img class="head_portrait"  v-lazy="dresserList.user_img" />
+        <div class="item_box" v-for="(item,index) in dresserList" @click="toDetail(item)">
+            <img class="head_portrait"  v-lazy="item.user_img || item.logo" />
             <div class="user_info">
                 <div class="name">
-                    {{dresserList.title}}
+                    {{item.title}}
                 </div>
                 <div class="desc">
-                    {{dresserList.user_title}}
+                    {{item.user_title || item.titles}}
                 </div>
             </div>
             <img class="arrow_right" src="static/img/icon_arrow_right.png" />
@@ -11,18 +11,15 @@
  
             <!-- 已关注达人列表 -->
             <div class="item_box">
-                <ul
+                <div
                     v-infinite-scroll="loadMore"
                     infinite-scroll-disabled="loading"
                     :infinite-scroll-distance="list.length">
-                    <li v-for="(item, index) in list" :key="index">
-
                         <!-- 达人列表组件 -->
                         <dresserList @toDetail="toDetail"
-                            :dresserList="item">
+                            :dresserList="list">
                         </dresserList>
-                    </li>
-                </ul>
+                </div>
             </div>
         <!-- </van-pull-refresh> -->
     </div>
@@ -11,18 +11,16 @@
  
         <!-- 已关注达人列表 -->
         <div class="item_box">
-            <ul
-                v-infinite-scroll="loadMore"
+            <div
+                infinite-scroll-immediate-check="true"
+                v-infinite-scroll="recommendMore"
                 infinite-scroll-disabled="loading"
-                :infinite-scroll-distance="list.length">
-                <li v-for="(item, index) in list" :key="index">
-
+                :infinite-scroll-distance="50">
                     <!-- 达人列表组件 -->
                     <dresserList @toDetail="toDetail"
-                                 :dresserList="item">
+                                 :dresserList="list">
                     </dresserList>
-                </li>
-            </ul>
+            </div>
         </div>
         <!-- </van-pull-refresh> -->
     </div>
@@ -39,7 +37,6 @@
         data() {
             return {
                 title: "",
-                isLoading: false,   // 下拉刷新控制
                 backs: {            // nav导航条数据
                     title: "已关注达人",
                     funcs: {
@@ -48,8 +45,9 @@
                         }
                     }
                 },
-                list: [],           // 达人列表
-                loading: false      // 上拉加载控制
+                list: null,           // 达人列表
+                loading: false,      // 上拉加载控制
+                pages:0, // 分页
             }
         },
         components: {
@@ -59,10 +57,10 @@
         created() {
  
             // 设置标题
-            this.$set(this, "title", "已关注达人");
-
-            // 获取关注人列表
-            this.fansShopMessageList();
+            this.$set(this, "title", "推荐达人页");
+            document.title = "推荐达人页"
+            // 获取更多的推荐达人
+            this.recommendMore();
         },
         methods: {
  
@@ -79,18 +77,20 @@
             /**
              * 已关注达人列表
              */
-            fansShopMessageList () {
+            recommendMore () {
  
                 // 校验登录
                 if (this.$parent.checkLogin()) {
-
+                    this.loading = true;
+                    this.pages++
                     // 加载中提示
-                    Indicator.open('加载中...');
+                    Indicator.open("加载中...");
  
                     // 请求接口
-                    this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
-                        uid: this.getStore("uid")
-                    },this.fansShopMessageListCallback, {
+                    this.http("/Api/" + this.getApiVersion().dynamic + "/hotDarenList", {
+                        uid: this.getStore("uid"),
+                        page: this.pages
+                    },this.recommendMoreCallback, {
                         method: "post"
                     });
                 }
@@ -101,7 +101,7 @@
              * @param {object} res [服务器返回数据]
              * @param {object} ext [扩展参数]
              */
-            fansShopMessageListCallback(res, ext) {
+            recommendMoreCallback(res, ext) {
  
                 // 加载完成
                 Indicator.close();
@@ -116,27 +116,15 @@
                     let {data: datas} = res;
  
                     /*获取裂变数据*/
-
-                    // 设置标题
-                    this.$set(this, "list", datas.list);
+                    if (datas.list && datas.list.length) {
+                        // 隐藏加载圈
+                        this.loading = false;
+                        this.$set(this, "list", datas.list);
+                    }
                 }
             },
  
             /**
-             * 上拉加载
-             */
-            loadMore() {
-                //            this.loading = true;
-                //            setTimeout(() => {
-                //                let last = this.list[this.list.length - 1];
-                //                for (let i = 1; i <= 10; i++) {
-                //                    this.list.push(last + i);
-                //                }
-                //                this.loading = false;
-                //            }, 2500);
-            },
-
-            /**
              * 通用跳转
              * @param {object} item [数据对象]
              */