商品列表添加滚动动画

static/nativeComponents/GoodsList/index.js

@@ -25,6 +25,7 @@ const componentOptions = {
     classificationLoadNum: 10,
     queryProductInfoLoading: false,
     loading: false,
+    scrollLoading: false, // 滚动加载优化后添加加载动画
     finished: false,
     goodsList:[],
     storageGoodsList:[],
@@ -311,7 +312,8 @@ const componentOptions = {
       this.setData({
         "datas.componentData.goodsList": goodsList,
         // goodsList
-        loadingFlag
+        loadingFlag,
+        scrollLoading: false,
       },function () {
         // that.lazyloading();
 
@@ -377,7 +379,9 @@ const componentOptions = {
         return
       }
 
-
+      this.setData({
+        scrollLoading: true
+      })
       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) {
@@ -401,10 +405,10 @@ const componentOptions = {
         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
+            loadingFlag,
           })
           wx.setStorageSync('loadingFlag',loadingFlag)
-
+          
           that.moreProduct(false)
 
           console.log('load--ok');

static/nativeComponents/GoodsList/index.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "goods-item":"./GoodsItem/index",
     "waterfall-flow":"../module/WaterfallFlow/index",
-    "heap-item":"./heapItem/index"
+    "heap-item":"./heapItem/index",
+    "van-loading":"/static/vant/loading/index"
   }
 }

static/nativeComponents/GoodsList/index.wxml

@@ -41,6 +41,10 @@
           indexs="{{index}}"
         ></goods-item>
       </view>
+      <!-- 网格布局滚动加载 -->
+      <view class="scrollLoading" wx:if="{{scrollLoading}}">
+        <van-loading size="16px" color="#fff"><text class="scrollLoadingText">加载中...</text></van-loading>
+      </view>
     </view>
     <!-- 横向滚动 -->
     <view class="goods-across" wx:elif="{{datas.componentData.style==='across'}}">

static/nativeComponents/GoodsList/index.wxss

@@ -90,4 +90,14 @@ image{
   flex-shrink: 0;
   display: inline-block;
   box-sizing: border-box;
+}
+.scrollLoading{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+}
+.scrollLoading .scrollLoadingText{
+  color: #fff;
 }
\ No newline at end of file