上拉加载更多

zhiyangdu
1 parent 55291fd9
Showing 3 changed files with 55 additions and 21 deletions
src/components/giftGivingItem/giftGivingItem.less
src/pages/myGiftBox/myGiftBox.less
src/pages/myGiftBox/myGiftBox.vue
@@ -18,7 +18,7 @@
             font-weight: 400;
             color: rgba(51, 51, 51, 1);
             line-height: 50px;
-            width: 400px;
+            width: 320px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -47,7 +47,15 @@
         }
     }
     .item_box{
-        height: calc(100vh-90px);
-        overflow-y: auto;
+        // height: calc(100vh-200px);
+        padding-bottom: 40px;
+        // overflow-y: auto;
+        height: auto;
+    }
+    .tip_text{
+        text-align: center;
+        margin-top: 20px;
+        font-size: 26px;
+        color: #999;
     }
 }
@@ -18,7 +18,7 @@
         <div class="item_box">
             <div
                 infinite-scroll-immediate-check="true"
-                v-infinite-scroll="getorderGiftList"
+                v-infinite-scroll="onInfiniteScroll"
                 infinite-scroll-disabled="loading"
                 :infinite-scroll-distance="50"
             >
@@ -37,6 +37,8 @@
                     :giftGivingItem="giftGivingItem"
                 >
                 </giftGivingItem>
+                <!-- 没有更多了 -->
+                <div class="tip_text">{{this.tipText}}</div>
             </div>
         </div>
     </div>
@@ -53,16 +55,18 @@ export default {
         return {
             active: 0,
             receivingGiftsInfo: null, // 收礼列表页数据
-            receivingGifts: {
+            loading: false, // 判断是否加载
+            receivingGifts: { // 收礼
                 loading: false, // 加载
                 pages: 0 // 分页
             },
             giftGivingItem: null, // 送礼列表页数据
-            giftsRuleUrl:null, // 礼物规则URL
-            giftGiving: {
+            giftsRuleUrl: null, // 礼物规则URL
+            giftGiving: { // 送礼
                 loading: false, // 加载
                 pages: 0 // 分页
-            }
+            },
+            tipText:null // 是否已加载完
         };
     },
     components: {
@@ -75,20 +79,46 @@ export default {
         // 送礼订单列表
         this.getorderGiveGiftList();
         // 赠礼规则
-        this.orderGiftContent()
+        this.orderGiftContent();
     },
     methods: {
+        /**
+         * tab切换
+         */
         onTap(active) {
             this.active = active;
+            // 初始化加载状态
+            this.loading = false;
             if (active === 1) {
                 // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                 this.setGiftBottomVisibleBySwitchTab(1);
+                 // 送礼订单列表
+                this.getorderGiveGiftList();
             } else {
+                // 收礼订单列表
+                this.getorderGiftList();
                 // 调用im是否显示隐藏1显示im聊天弹窗0不显示
                 this.setGiftBottomVisibleBySwitchTab(0);
             }
         },
         /**
+         * 下啦滑动加载更多
+         */
+        onInfiniteScroll() {
+            if (this.active === 0) {
+                // 收礼订单列表
+                this.loading = this.receivingGifts.loading
+                this.getorderGiftList();
+            } else {
+                // 送礼订单列表
+                this.loading = this.giftGiving.loading
+                this.getorderGiveGiftList();
+            }
+            if(!this.loading){
+                this.tipText = "已经全部加载完毕"
+            }
+        },
+        /**
          * 显示和隐藏聊天
          */
         setGiftBottomVisibleBySwitchTab(itme) {
@@ -157,7 +187,7 @@ export default {
                 if (datas.list && datas.list.length) {
                     // 隐藏加载圈
                     this.receivingGifts.loading = false;
-                    if (this.pages > 1) {
+                    if (this.receivingGifts.pages > 1) {
                         this.$set(this, "receivingGiftsInfo", [
                             ...this.receivingGiftsInfo,
                             ...datas.list
@@ -277,15 +307,11 @@ export default {
                 if (datas.list && datas.list.length) {
                     // 隐藏加载圈
                     this.giftGiving.loading = false;
-                    if (this.pages > 1) {
-                        this.$set(this, "giftGivingItem", [
-                            ...this.giftGivingItem,
-                            ...datas.list
-                        ]);
+                    if (this.giftGiving.pages > 1) {
+                        this.$set(this, "giftGivingItem",[...this.giftGivingItem,...datas.list]);
                     } else {
                         this.$set(this, "giftGivingItem", datas.list);
                     }
-                    console.log(this.giftGivingItem);
                 }
                 /* 获取送礼订单列表 结束 */
             } else if (res.code == 400) {
@@ -318,19 +344,19 @@ export default {
          * @param {object} res [服务器返回数据]
          * @param {object} ext [扩展参数]
          */
-        orderGiftContentCallback(res, ext){
-             // 加载完成
+        orderGiftContentCallback(res, ext) {
+            // 加载完成
             Indicator.close();
  
             // 返回处理
             if (res.code == 200) {
-                 // 解构数据
+                // 解构数据
                 let { data: datas } = res;
-                this.giftsRuleUrl = datas.content
+                this.giftsRuleUrl = datas.content;
             }
         },
         // 送礼规则说明
-        giftRules(){
+        giftRules() {
             // 判断并调用通用跳转
             if (typeof this.$parent.gotoDetail === "function") {
                 // 临时，设置跳转商品详情参数