商品列表滚动加载

src/pages/home/index.vue

 <template>
   <div class="domain">
     <!-- <goods-list id="goodsList"></goods-list> -->
-    <div v-for="(item,index) in pageData" :key="index">
-      <div v-if="item.componentCode=='banner'">
-        <banner :datas="item"></banner>
+    <scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;" scroll-y="true">
+      <div v-for="(item,index) in pageData" :key="index">
+        <div v-if="item.componentCode=='banner'">
+          <banner :datas="item"></banner>
+        </div>
+        <div v-else-if="item.componentCode=='goods-list'" style="height:100%;">
+          <goods-list class="goodsListItem" :datas="item"></goods-list>
+        </div>
       </div>
-      <div v-else-if="item.componentCode=='goods-list'">
-        <goods-list :datas="item"></goods-list>
-      </div>
-    </div>
+    </scroll-view>
     <!-- <image
       src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
     ></image>
@@ -49,6 +51,13 @@ export default {
       this.pageData = JSON.parse(this.pageInfo.pageData);
       console.log('36',this.pageData)
     },
+    scrolls(el){
+      console.log('scroll')
+      this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
+    },
+    scrolltolower(){
+      console.log("scrolltolower")
+    }
   },
 };
 </script>

static/nativeComponents/GoodsList/GoodsItem/index.wxml

@@ -71,7 +71,11 @@
 		<!-- 商品详情 -->
 		<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
 			<view class="info-top flex">
-				<view class="name" wx:if="{{datas.componentData['nameShow']}}">
+				<view
+				 class="name"
+				 wx:if="{{datas.componentData['nameShow']}}"
+				 style="color:{{datas.componentData['nameColor']}};font-weight:{{datas.componentData['nameFontWeight']}};font-size:{{datas.componentData['nameFontSize']}}em;"
+				>
 					{{items!=null?items['productName']:'名称'}}
 				</view>
 				<view

static/nativeComponents/GoodsList/index.js

@@ -16,7 +16,10 @@ const componentOptions = {
     isPageHidden: false, // 页面是否处于隐藏状态
     titleIcon: "",
     classificationLoadPage: 1,
-    classificationLoadNum: 10
+    classificationLoadNum: 10,
+    queryProductInfoLoading: false,
+    loading: false,
+    finished: false
   },
   // 数据监听器
   observers: {},
@@ -65,7 +68,9 @@ const componentOptions = {
         titleIcon
       } = this.data.datas.componentData;
       angleSignImg = DFSImg(angleSignImg);
-      titleIcon = DFSImg(titleIcon);
+      if (titleIcon) {
+        titleIcon = DFSImg(titleIcon);
+      }
       this.setData({
         "data.datas.componentData.angleSignImg": angleSignImg,
         titleIcon
@@ -91,39 +96,35 @@ const componentOptions = {
     },
     getProductList(code, type) {
       let { goodsList, goodsSort } = this.data.datas.componentData;
+      let { classificationLoadPage,loading,finished,queryProductInfoLoading } = this.data;
+      if (queryProductInfoLoading == true) {
+        return;
+      }
+      this.setData({ queryProductInfoLoading: true });
       // type 1初始化 2滚动加载
       //分类查
       if (code == 1) {
-        let query = {
-          categoryId: this.data.datas.componentData.categoryId,
-          page: this.showRowNum()
-            ? 1
-            : this.data.datas.componentData.classificationLoadPage, // 当前页
-          rows: this.showRowNum()
-            ? this.getItemNum()
-            : this.classificationLoadNum, // 一页多少条
-          sortColumn: this.data.datas.componentData.goodsSort,
-          sortType: this.data.datas.componentData.goodsSort != 2 ? 1 : 0,
-          whetherShowSoldOutGoods: this.data.datas.componentData
-            .whetherShowSoldOutGoods, //查询销售数量
-          whetherQueryCollectCount: true, //查询收藏数
-          whetherUseVirtualSalesQty: true, //是否使用虚拟销售数量
-          whetherUseVirtualCollectCount: true, //是否使用虚拟收藏人数
-          whetherFindDistributionCommission: this
-            .whetherFindDistributionCommission, //是否查询商品佣金（0：不查询，1：展示，为空不查佣金）
-          whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice
-            ? 1
-            : 0, //是否查询会员价  1是  0否
-          whetherShowGoodsDefaultTagFlag: this.data.datas.componentData
-            .marketingTag
-            ? 1
-            : 0, //是否展示营销标签  1是  0否
-          whetherFindMultiShopFlag: 1 //是否查询多商户   //商城使用
-        };
+        if (type == 1) {
+          classificationLoadPage = 1;
+        } else {
+          classificationLoadPage++;
+          loading = true;
+        }
+        this.setData({ classificationLoadPage, loading });
+        let query = { categoryId: this.data.datas.componentData.categoryId, page: this.showRowNum() ? classificationLoadPage : 1, rows: this.showRowNum() ? this.data.classificationLoadNum:this.getItemNum(), sortColumn: goodsSort, sortType: goodsSort != 2 ? 1 : 0, whetherShowSoldOutGoods: this.data.datas.componentData.whetherShowSoldOutGoods, whetherQueryCollectCount: true, whetherUseVirtualSalesQty: true, whetherUseVirtualCollectCount: true, whetherFindDistributionCommission: this.whetherFindDistributionCommission, whetherFindRecommendedCardFlag: this.data.datas.componentData.vipPrice ? 1 : 0, whetherShowGoodsDefaultTagFlag: this.data.datas.componentData.marketingTag ? 1 : 0, whetherFindMultiShopFlag: 1 }; // 当前页 // 一页多少条 //查询销售数量 //查询收藏数 //是否使用虚拟销售数量 //是否使用虚拟收藏人数 //是否查询商品佣金（0：不查询，1：展示，为空不查佣金） //是否查询会员价  1是  0否 //是否展示营销标签  1是  0否 //是否查询多商户   //商城使用
         goodsApi.queryProductInfo(query).then(res => {
+          this.setData({ loading: false, queryProductInfoLoading:false });
           if (res.data.code == 200) {
-            let goodsList = res.data.data.list;
-            this.goodsListVal(goodsList);
+            let goodsLists = res.data.data.list;
+            if (type == 1) {
+              goodsList = goodsLists;
+            } else {
+              goodsList = [...goodsList, ...goodsLists];
+            }
+            if (goodsLists && goodsLists.length < 10) {
+              this.setData({ finished:true });
+            }
+            this.goodsListVal(goodsList,type);
           }
         });
       } else {
@@ -177,13 +178,13 @@ const componentOptions = {
       goodsApi.queryMoreProductInfo(moreQuery).then(res => {
         if (res.data.code == 200) {
           goodsList = res.data.data;
-          this.goodsListVal(goodsList);
+          this.goodsListVal(goodsList,1);
         }
       });
     },
-    goodsListVal(goodsList) {
-      console.log(goodsList,"------------goodsListVal")
-      goodsList.forEach((item,index) => {
+    goodsListVal(goodsList,type) {
+      console.log(goodsList, "------------goodsListVal");
+      goodsList.forEach((item, index) => {
         item.marketingTag = item.defaultTags
           ? this.filtermark(
               item.defaultTags,
@@ -191,21 +192,21 @@ const componentOptions = {
             )
           : [];
         item.shopLogoUrl = DFSImg(item.shopLogoUrl);
-        item.coverImage = DFSImg(item.coverImage);
-        item.productImgUrl = DFSImg(item.productImgUrl);
+        item.coverImage = DFSImg(item.coverImage,100,100,0);
+        item.productImgUrl = DFSImg(item.productImgUrl, 100, 100, 0);
         item.minPrice = Number(item.minPrice).toFixed(2);
         item.qty = Number(item.qty);
         item.saleQty = Number(item.saleQty);
         item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
-        item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable?
-          Number(item.minPriceAfterRecommendedCardPriceTable):"";
-        item.minProductGoodsCommission = item.minProductGoodsCommission?
-          Number(item.minProductGoodsCommission).toFixed(2) : 0;
-        item.minGoodsSuggestedRetailPrice = item
-          .minGoodsSuggestedRetailPrice?Number(
-            item.minGoodsSuggestedRetailPrice
-          )
-            .toFixed(2) : "";
+        item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
+          ? Number(item.minPriceAfterRecommendedCardPriceTable)
+          : "";
+        item.minProductGoodsCommission = item.minProductGoodsCommission
+          ? Number(item.minProductGoodsCommission).toFixed(2)
+          : 0;
+        item.minGoodsSuggestedRetailPrice = item.minGoodsSuggestedRetailPrice
+          ? Number(item.minGoodsSuggestedRetailPrice).toFixed(2)
+          : "";
         item.showVipPrice = this.showVipPrice(item, index);
         item.showVipTag = this.showVipTag(item, index);
         if (item.saleTime) {
@@ -217,8 +218,16 @@ const componentOptions = {
         this.setData({
           "datas.componentData.goodsList": goodsList
         });
-        if (this.selectComponent("#waterfallFlow")) {
-          this.selectComponent("#waterfallFlow").initList();
+        if (type == 1) {
+          // 初始化
+          if (this.selectComponent("#waterfallFlow")) {
+            this.selectComponent("#waterfallFlow").initList();
+          }
+        } else {
+          // 滚动加载
+          if (this.selectComponent("#waterfallFlow")) {
+            this.selectComponent("#waterfallFlow").reLoadPro();
+          }
         }
       }, 0);
     },
@@ -249,9 +258,9 @@ const componentOptions = {
       }
     },
     showRowNum() {
-      return !(
+      return (
         this.data.datas.componentData.moreShow == false &&
-        this.data.datas.componentData.getStyle == "waterfall" &&
+        this.data.datas.componentData.style == "waterfall" &&
         this.data.datas.componentData.goodsSource == "classify"
       );
     },
@@ -278,21 +287,33 @@ const componentOptions = {
       }
       return showFlag;
     },
-    showVipTag(item,index) {
+    showVipTag(item, index) {
       // 索引 0 显示价格 1显示名称
       let showFlag = false;
       let vipPrice = item["minPriceAfterRecommendedCardPriceTable"];
       let showTag = item["recommendedCardMinPricePriceTableName"];
-      if (
-        vipPrice &&
-        showTag &&
-        Number(vipPrice) <= Number(item["minPrice"])
-      ) {
+      if (vipPrice && showTag && Number(vipPrice) <= Number(item["minPrice"])) {
         showFlag = true;
       }
       return showFlag;
+    },
+    getScroll(el) {
+      // 是指定分类且不显示查看更多的瀑布流组件滚动加载
+      let { goodsSource, moreShow, style } = this.data.datas.componentData;
+      if (
+        goodsSource == "classify" &&
+        moreShow == false &&
+        style == "waterfall"
+      ) {
+        this.selectComponent("#waterfallFlow").getScroll(el);
+      }
+    },
+    // 分页加载
+    onLoad() {
+      console.log("---触发分页加载");
+      this.getProductList(1,2);
     }
-  },
+  }
 };
 
 Component(componentOptions);

static/nativeComponents/GoodsList/index.wxml

@@ -63,6 +63,9 @@
 			 datas="{{datas}}"
 			 padding="{{datas.componentData.proGap}}"
 			 wx:if="{{datas.componentData.goodsList}}"
+			 bindonLoad="onLoad"
+			 loading="{{loading}}"
+			 finished="{{finished}}"
 			></waterfall-flow>
 		</view>
 		<!-- 横向列表 -->

static/nativeComponents/module/WaterfallFlow/index.js

@@ -13,8 +13,17 @@ Component({
     },
     padding: {
       type: Number
+    },
+    loading: {
+      type: Boolean
+    },
+    finished: {
+      type: Boolean
     }
   },
+  onPageScroll(e) {
+    console.log(e);
+  },
   lifetimes: {
     created() {
       console.log("进入组件created");
@@ -26,7 +35,14 @@ Component({
     },
     ready() {
       console.log("进入组件ready");
-      // this.reLoadPro();
+      let _this = this;
+      let { clientHeight } = this.data;
+      wx.getSystemInfo({
+        success: function(res) {
+          let clientHeight = parseInt(res.windowHeight);
+          _this.setData({ clientHeight });
+        }
+      });
     }
   },
   observers: {},
@@ -36,50 +52,71 @@ Component({
     //列高度数组
     waterfallDeviationHeight: [0, 0],
     contentList: [],
-    inj: 0
+    inj: 0,
+    clientHeight: 0, //窗口高度
+    goodsNum:0,
   },
   methods: {
     // 初始化数组
     initList() {
       // 初始化容器
-      let contentList = this.data.contentList;
+      let { contentList, waterfallDeviationHeight } = this.data;
       contentList[0] = [];
       contentList[1] = [];
-      this.setData({ contentList });
+      waterfallDeviationHeight = [0,0];
+      this.setData({ contentList, waterfallDeviationHeight });
       console.log(this.data.note, "-------------------185");
       this.reLoadPro();
     },
     async reLoadPro() {
-      let _this = this;
-      this.setHeight(0);
+      this.setHeight(this.data.goodsNum);
+      this.setData({ goodsNum:this.data.note.length>0?this.data.note.length+1:0 });
     },
     setHeight(i) {
       let _this = this;
       let item = this.data.note[i];
-      console.log(i, "---------------i");
-      console.log(
-        this.data.waterfallDeviationHeight,
-        "-------waterfallDeviationHeight"
-      );
+      // console.log(i, "---------------i");
+      // console.log(
+      //   this.data.waterfallDeviationHeight,
+      //   "-------waterfallDeviationHeight"
+      // );
       let minIndex = this.filterMin();
-      console.log(minIndex, "---------------126");
+      // console.log(minIndex, "---------------126");
       let contentList = this.data.contentList;
       contentList[minIndex].push(item);
       this.setData({ contentList });
-      const queryDom = wx.createSelectorQuery().in(this);
-      queryDom.select(`.item${minIndex}`).boundingClientRect();
-      queryDom.exec(res => {
-        res[0].height;
-        console.log(res[0], "--------------res");
-        let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
-        waterfallDeviationHeight[minIndex] = res[0].height;
-        _this.setData({ waterfallDeviationHeight });
-        if (i >= _this.data.note.length - 1) {
-          return;
-        }
-        i++;
-        _this.setHeight(i);
-      });
+       _this
+         .createSelectorQuery()
+         .select(`.item${minIndex}`)
+         .boundingClientRect(function(res) {
+           if (res) {
+             res.height;
+             console.log(res, "--------------res");
+             let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
+             waterfallDeviationHeight[minIndex] = res.height;
+             _this.setData({ waterfallDeviationHeight });
+             if (i >= _this.data.note.length - 1) {
+               return;
+             }
+             i++;
+             _this.setHeight(i);
+           }
+         })
+         .exec();
+      // const queryDom = wx.createSelectorQuery().in(this);
+      // queryDom.select(`.item${minIndex}`).boundingClientRect();
+      // queryDom.exec(res => {
+      //   res[0].height;
+      //   console.log(res[0], "--------------res");
+      //   let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
+      //   waterfallDeviationHeight[minIndex] = res[0].height;
+      //   _this.setData({ waterfallDeviationHeight });
+      //   if (i >= _this.data.note.length - 1) {
+      //     return;
+      //   }
+      //   i++;
+      //   _this.setHeight(i);
+      // });
     },
     filterMin() {
       let val = Math.min.apply(null, this.data.waterfallDeviationHeight);
@@ -101,6 +138,26 @@ Component({
         ev.target.dataset.id,
         "-----------------------219"
       );
+    },
+    getScroll(el) {
+      let { finished } = this.properties;
+      let _this = this;
+      _this
+        .createSelectorQuery()
+        .select("#waterfallFlow")
+        .boundingClientRect(function(res) {
+          if (res) {
+            console.log(el, "-------------118");
+            console.log(res, "---------------35");
+            let scrollTop = parseInt(el.target.scrollTop);
+            let domHeight = parseInt(res.height);
+            // 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
+            if (scrollTop + _this.data.clientHeight >= domHeight - 150 && finished == false) {
+              _this.triggerEvent("onLoad");
+            }
+          }
+        })
+        .exec();
     }
   }
 });

static/nativeComponents/module/WaterfallFlow/index.wxml

 <!--瀑布流组件-->
-<view class="waterfallFlow" style="--proGap:{{padding}}rpx">
+<view
+ class="waterfallFlow"
+ id="waterfallFlow"
+ style="--proGap:{{padding}}rpx"
+>
 	<view class="container flex">
 		<view
 		 wx:for="{{contentList}}"
@@ -21,5 +25,10 @@
 			</view>
 		</view>
 	</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="{{ finished}}">暂无更多</text>
+	</view>
 </view>