列表布局滚动加载

static/nativeComponents/GoodsList/index.js

@@ -66,6 +66,7 @@ const componentOptions = {
     },
     randomNumber: "",
     selectScreen: false, // 筛选选中状态
+    clientHeight: 0, //窗口高度
   },
   // 数据监听器
   observers: {},
@@ -74,6 +75,13 @@ const componentOptions = {
     created() {},
     ready() {
       let _this = this;
+      let { clientHeight } = this.data;
+      wx.getSystemInfo({
+        success: function(res) {
+          let clientHeight = parseInt(res.windowHeight);
+          _this.setData({ clientHeight });
+        }
+      });
       app.getFilterGoodsData = (val) => {
         if (val.randomNumber != _this.data.randomNumber) return;
         console.log(val,'-------------------------77')
@@ -539,7 +547,7 @@ const componentOptions = {
       }
       // 瀑布流模式默认查6条
       if(this.data.datas.componentData.style == "waterfall" && this.data.datas.componentData["goodsSource"] == "specifyFilter"){
-        return 6;
+        return 10;
       }
       //数量
       if (
@@ -549,7 +557,7 @@ const componentOptions = {
         //网格模式
         if (
           this.data.datas.componentData.rowNum *
-            this.data.datas.componentData.columnNum >=
+          this.data.datas.componentData.columnNum >=
           this.data.datas.componentData.goodsList.length
         ) {
           return this.data.datas.componentData.goodsList.length;
@@ -560,7 +568,7 @@ const componentOptions = {
           );
         }
       } else {
-        return this.data.datas.componentData.goodsList.length;
+        return 10;
       }
     },
     showRowNum() {
@@ -612,12 +620,38 @@ const componentOptions = {
       this.lazyloading()
       if (
         (goodsSource == "classify" || goodsSource == "specifyFilter") &&
-        moreShow == false &&
-        style == "waterfall"
+        moreShow == false
       ) {
-        this.selectComponent("#waterfallFlow").getScroll(el);
+        if (style == "waterfall") {
+          this.selectComponent("#waterfallFlow").getScroll(el);
+        } else if (style == "rowList") {
+          console.log("rowList--滚动加载")
+          this.getScrollEl(el);
+        }
       }
     },
+    getScrollEl(el) {
+      let { finished } = this.data;
+      let _this = this;
+      _this
+        .createSelectorQuery()
+        .select("#goods-rowList")
+        .boundingClientRect(function(res) {
+          if (res) {
+            let scrollTop = parseInt(el.scrollTop);
+            let domHeight = parseInt(res.height);
+            // 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
+            console.log(scrollTop,_this.data.clientHeight,domHeight - 150,domHeight,finished,'--------------finished1')
+            if (
+              scrollTop + _this.data.clientHeight >= domHeight - 150 &&
+              finished == false
+            ) {
+              _this.onLoad();
+            }
+          }
+        })
+        .exec();
+    },
     // 分页加载
     onLoad() {
       console.log("---触发分页加载");

static/nativeComponents/GoodsList/index.wxml

@@ -123,6 +123,7 @@
     <!-- 横向列表 -->
     <view
       class="goods goods-rowList"
+      id="goods-rowList"
       wx:elif="{{datas.componentData.style==='rowList'}}"
       style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
     >
@@ -138,6 +139,11 @@
           indexs="{{index}}"
         ></goods-item>
       </view>
+      <!-- 上拉加载底部展示 -->
+      <view class="loadBottom" wx:if="{{datas.componentData.moreShow == false && datas.componentData.style == 'rowList'}}">
+        <text wx:if="{{loading}}">加载中...</text>
+        <text wx:if="{{ finished}}">暂无更多</text>
+      </view>
     </view>
     <!-- 堆叠卡片 -->
     <view class="goods-heap-Item" wx:if="{{datas.componentData.style==='heap'}}">

static/nativeComponents/GoodsList/index.wxss

@@ -201,4 +201,10 @@ image{
 }
 .scrollLoading .scrollLoadingText{
   color: #fff;
+}
+.loadBottom{
+  text-align: center;
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 10rpx;
 }
\ No newline at end of file

static/nativeComponents/module/WaterfallFlow/index.wxml

@@ -27,7 +27,7 @@
 	</view>
 	<!-- 上拉加载底部展示 -->
 	<view class="loadBottom" wx:if="{{datas.componentData.goodsSource == 'classify' && datas.componentData.moreShow == false &&datas.componentData.style == 'waterfall'}}">
-		<text wx:if="{{loading}}">加载中~</text>
+		<text wx:if="{{loading}}">加载中...</text>
 		<text wx:if="{{ finished}}">暂无更多</text>
 	</view>
 </view>