首页商品列表分页懒加载

src/components/basicTool/transverse-label/index.vue

@@ -69,7 +69,10 @@
             <banner :datas="item1"></banner>
           </div>
           <div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
-            <goods-list class="goodsListItem" :datas="item1"></goods-list>
+
+            <!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> -->
+           <goods-list :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
+
           </div>
           <div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
             <area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
@@ -215,6 +218,28 @@ export default {
   computed: {
     tabList: {
       get() {
+        let pageGoodsList = []
+        let storageDatasList = []
+        let loadingFlag = []
+        let ids =[]
+        let pageNumList = []
+        this.datas.componentData.tabList.forEach(v=>{
+          v.contentList.forEach(vc=>{
+            if (vc.componentCode == 'goods-list') {
+              pageGoodsList.push([])
+              storageDatasList.push([])
+              ids.push([])
+              pageNumList.push(1)
+              loadingFlag.push(false)
+            }
+          })
+        })
+        console.log(pageGoodsList,storageDatasList,ids,loadingFlag,pageNumList,'newVal');
+        wx.setStorageSync("pageGoodsList",pageGoodsList)
+        wx.setStorageSync("storageDatasList",storageDatasList)
+        wx.setStorageSync("ids",ids)
+        wx.setStorageSync("loadingFlag",loadingFlag)
+        wx.setStorageSync("pageNumList",pageNumList)
         return this.datas.componentData.tabList.filter(
           (item) => item.visible == undefined || item.visible == 1
         );
@@ -421,6 +446,9 @@ export default {
           item.getScroll()
         })
       }
+       if(this.$parent.$mp.page.selectAllComponents('.goodsListItem')){
+        this.$parent.$mp.page.selectAllComponents('.transverse-label-goodsListItem')
+      }
       this.active=res.target.index;
     },
     timeOutInitTabs(notGetAllTabWidth) {

src/pages/home/index.vue

@@ -157,6 +157,7 @@ import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } fr
 import indexApi from "@/api/index.js";
 import { throttle, concatUrl } from "../../utils/index.js"
 import mpvueCropper from '@/components/mpvue-cropper'
+import tool from '../../utils/tool.js'
 const app = getApp();
 const { log } = app;
 export default {
@@ -387,6 +388,26 @@ export default {
       // 新人有礼弹窗
       this.newUserFun();
     }
+
+
+    //清除懒加载缓存
+    wx.removeStorage({
+      key: 'pageGoodsList'
+    })
+    wx.removeStorage({
+      key: 'storageDatasList'
+    })
+     wx.removeStorage({
+      key: 'datasIndex'
+    })
+    wx.removeStorage({
+      key: 'loadingFlag'
+    })
+     wx.removeStorage({
+      key: 'pageNumList'
+    })
+    
+    console.log('storageGoodsList---detory');
   },
   onShow() {
     // 设置显示条件
@@ -408,10 +429,16 @@ export default {
       this.active=checkTabbarPage('/')
     }
 
-    this.$mp.page.onPageScroll= (el)=>{
-      throttle(this.scrolls(el),100)
-    };
+    // this.$mp.page.onPageScroll= (el)=>{
+    //   throttle(this.scrolls(el),100)
+    // };
   },
+  // 滚动节流方法
+  onPageScroll: tool.throttle(function (el) {
+    // console.log(el);
+    this.scrolls(el)
+  },200),
+
   methods: {
     async setVisible(pageList, cb) {
       // 首页显示条件
@@ -673,6 +700,12 @@ export default {
       if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
         this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
       }
+      if(this.$mp.page && this.$mp.page.selectAllComponents(".transverse-label-goodsListItem")){
+        this.$mp.page.selectAllComponents(".transverse-label-goodsListItem").forEach(item=>{
+          console.log(item,'-this.$mp.page.selectComponent(".goodsListItem")')
+          item.getScroll(el)
+        })
+      }
     },
     setFooterShow(el){
       // return

static/nativeComponents/GoodsList/GoodsItem/index.wxml

 <!-- 商品列表item -->
+<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
+<!-- <view wx:if="{{items && datas.componentData['style'] == 'list' &&  items.loadState == false}}">
+	<view class="skeleton-animate">
+    	<view class="skeleton-bg skeleton-img"></view>
+        <view class="skeleton-bg skeleton-title"></view>
+		<view class="skeleton-bg skeleton-detail"></view>
+		<view class="skeleton-bg skeleton-price"></view>
+    </view>
+</view> -->
+
 <view
  class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
  style="--proGap2:{{datas.componentData.proGap*2}}rpx;"

static/nativeComponents/GoodsList/index.js

@@ -9,6 +9,12 @@ const componentOptions = {
   properties: {
     datas: {
       type: Object
+    },
+    datasIndex:{
+      type: Number
+    },
+    goodsListIndex:{
+      type: Number
     }
   },
   // 组件数据
@@ -21,6 +27,12 @@ const componentOptions = {
     loading: false,
     finished: false,
     goodsList:[],
+    storageGoodsList:[],
+    storageDatasList:[],
+    pageSize:10,
+    pageNum:1,
+    pageGoodsList:[],
+    loadingFlag:[],
   },
   // 数据监听器
   observers: {},
@@ -61,6 +73,11 @@ const componentOptions = {
   },
   // 组件方法
   methods: {
+    // setPageDatas(active){
+      
+    //   this.pageGoodsList = wx.getStorageSync('pageGoodsList')
+    //   console.log(this.pageGoodsList,active,'active');
+    // },
     init() {
       let {
         goodsType,
@@ -183,11 +200,39 @@ const componentOptions = {
             let goodsList = this.render ? res.data.list : res.data.data.list;
             return element.terminalProductId;
           });
-          this.moreProduct(ids);
+
+          let storageIds = wx.getStorageSync('ids')
+          storageIds[this.data.goodsListIndex] = ids
+          wx.setStorageSync('ids',storageIds)
+
+          let storageDatasList = wx.getStorageSync('storageDatasList')
+          storageDatasList[this.data.goodsListIndex] = this.data.datas.componentData
+          wx.setStorageSync('storageDatasList',storageDatasList)
+          
+          this.moreProduct(true);
         }
       });
     },
-    async moreProduct(terminalProductIds) {
+
+    async moreProduct(flag) {
+      // 没有数据了就不再请求了，直接return
+      if (this.data.pageGoodsList.length != 0  &&  this.data.pageGoodsList[this.data.datasIndex].length == wx.getStorageSync('ids')[this.data.datasIndex].length) return
+      let terminalProductIds = []
+      console.log(pageNum,'page-----');
+      let pageNumList = wx.getStorageSync('pageNumList')
+      let pageNum = null
+      if (flag) {
+        pageNum = pageNumList[this.data.goodsListIndex]
+        terminalProductIds = wx.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
+        pageNum += 1
+        pageNumList[this.data.goodsListIndex] = pageNum
+      }else{
+        pageNum = pageNumList[this.data.datasIndex]
+        terminalProductIds = wx.getStorageSync('ids')[this.data.datasIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
+        pageNum += 1
+        pageNumList[this.data.datasIndex] = pageNum
+      }
+      wx.setStorageSync('pageNumList',pageNumList)
       let {
         vipPrice,
         marketingTag,
@@ -207,11 +252,11 @@ const componentOptions = {
       goodsApi.queryMoreProductInfo(moreQuery).then(res => {
         if (res.data.code == 200) {
           goodsList = res.data.data;
-          this.goodsListVal(goodsList, 1);
+          this.goodsListVal(goodsList, 1,flag);
         }
       });
     },
-    goodsListVal(goodsList, type) {
+    goodsListVal(goodsList, type,flag) {
       console.log(goodsList, "------------goodsListVal");
       goodsList.forEach((item, index) => {
         item.marketingTag = item.defaultTags
@@ -221,6 +266,7 @@ const componentOptions = {
             )
           : [];
         item.shopLogoUrl = DFSImg(item.shopLogoUrl);
+        item.loadState = false
         item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
         item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
         item.minPrice = Number(item.minPrice).toFixed(2);
@@ -243,10 +289,47 @@ const componentOptions = {
           item.getSaleTime = this.getSaleTime(item.saleTime);
         }
       });
+      var that = this
+
+      let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
+      if (flag) {
+        pageGoodsList[that.data.goodsListIndex].push(...goodsList)
+      }else{
+        pageGoodsList[that.data.datasIndex].push(...goodsList)
+        console.log(pageGoodsList[that.data.datasIndex],'--pageGoodsList[that.data.datasIndex]')
+      }
+      wx.setStorageSync('pageGoodsList', pageGoodsList);
+
+
+       // 获取是否要开启请求拦截
+      let loadingFlag = wx.getStorageSync('loadingFlag')
+      loadingFlag[that.data.datasIndex] = false
+      wx.setStorageSync('loadingFlag', loadingFlag);
+      that.setData({
+        pageGoodsList,
+      })
       this.setData({
         "datas.componentData.goodsList": goodsList,
-        goodsList
-      });
+        // goodsList
+        loadingFlag
+      },function () {
+        // that.lazyloading();
+
+        // 节点布局方案在组件嵌套层级过深测试无效
+        // let goodsList = this.data.goodsList  // 获取原数据
+        // goodsList.forEach((item,index)=>{
+        //   wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe(`.goodsItemIndex${index}`, (ret) => {
+        //     // if (ret.intersectionRatio > 0){
+        //     //   group[i].show = true 
+        //     // }
+        //     // this.setData({ // 更新数据
+        //     //   group
+        //     // })
+        //     console.log('1111');
+        //   })
+        // })
+      })
+
       if (type == 1) {
         // 初始化
         if (this.selectComponent("#waterfallFlow")) {
@@ -259,6 +342,77 @@ const componentOptions = {
         }
       }
     },
+
+    // 触发图片加载
+    lazyloading(){
+      var that = this
+      console.log(that.data.datasIndex,that.data.goodsListIndex,'datasIndex');
+      console.log(that.data.pageGoodsList[that.data.datasIndex]);
+      let storageDatasList = wx.getStorageSync('storageDatasList') || []
+      
+      let { style } = storageDatasList[that.data.datasIndex];
+      let type = ''
+      if(style == 'list'){
+        type = 'goods-item'
+      }else{
+        console.log("不是goods-item");
+        return
+      }
+     
+      let windowHeight =  wx.getSystemInfoSync().windowHeight
+      let pageGoodsList =  wx.getStorageSync('pageGoodsList') || []
+      console.log(that.data.pageGoodsList,pageGoodsList,that.data.datasIndex,'pageGoodsList--loading');
+
+      let loadingFlag =  wx.getStorageSync('loadingFlag')
+      // 如果所有的商品都加载完成直接return
+      if (loadingFlag[that.data.datasIndex]) {
+        console.log("如果所有的商品都加载完成直接return");
+        return
+      }
+
+      let ids = wx.getStorageSync('ids')[that.data.datasIndex]
+      if (ids.length == that.data.pageGoodsList[that.data.datasIndex].length &&
+        that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true
+        ) {
+        return
+      }
+
+
+      wx.createSelectorQuery().selectAll(`.goodsListItemIndex${that.data.datasIndex}>>>.${type}`).boundingClientRect(function(rects){
+        for (let index = 0; index < rects.length; index++) {
+          if (rects[index].top == 0 && rects[index].bottom == 0 && rects[index].left == 0 && rects[index].right == 0) {
+            break
+          }
+          if (rects[index].top < windowHeight) {
+            pageGoodsList[that.data.datasIndex][index].loadState = true
+          }
+        }
+
+        that.setData({
+          pageGoodsList,
+        })
+        // that.pageGoodsList = pageGoodsList
+        console.log(rects,pageGoodsList[that.data.goodsListIndex], pageGoodsList[that.data.datasIndex],'fff');
+        wx.setStorageSync('pageGoodsList',pageGoodsList)
+
+
+
+        // 如果当前分页倒数第一张加载完成直接 打开loadingFlag开关并加载下一页数据
+        if (that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true) {
+          loadingFlag[that.data.datasIndex] = true
+          that.setData({
+            loadingFlag
+          })
+          wx.setStorageSync('loadingFlag',loadingFlag)
+
+          that.moreProduct(false)
+
+          console.log('load--ok');
+        }
+      
+      }).exec();
+
+    },
     getSaleTime(val) {
       return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
     },
@@ -326,8 +480,12 @@ const componentOptions = {
       return showFlag;
     },
     getScroll(el) {
+      //! 如果不是当前tab页return不执行滚动加载
+      if (this.data.datasIndex != this.data.goodsListIndex) return;
       // 是指定分类且不显示查看更多的瀑布流组件滚动加载
       let { goodsSource, moreShow, style } = this.data.datas.componentData;
+      console.log('goodsSource, moreShow, style',goodsSource, moreShow, style);
+      this.lazyloading()
       if (
         goodsSource == "classify" &&
         moreShow == false &&

static/nativeComponents/GoodsList/index.wxml

@@ -25,15 +25,20 @@
       style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
     >
       <view
-        wx:for="{{goodsList}}"
+        wx:for="{{pageGoodsList[datasIndex]}}"
         wx:key="index"
-        class="goods-item"
+        class="goods-item {{'goodsItemIndex'+index}}"
         style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
       >
-        <goods-item
+        <!-- <goods-item
           datas="{{datas}}"
           items="{{goodsList[index]}}"
           indexs="{{index}}"
+        ></goods-item> -->
+        <goods-item
+          items="{{item}}"
+          datas="{{datas}}"
+          indexs="{{index}}"
         ></goods-item>
       </view>
     </view>