瀑布流优化

src/pages/home/index.vue

@@ -2,8 +2,8 @@
   <div class="domain">
     <!-- <view class="ant-daipinglun">1</view> -->
     <!-- <goods-list id="goodsList"></goods-list> -->
-    <scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;" scroll-y="true">
-      <div style="position:relative">
+    <!-- <scroll-view @scroll="scrolls" @scrolltolower="scrolltolower" style="height:100vh;overflow-y:auto;" scroll-y="true"> -->
+      <div style="position:relative;">
         <ThemeDataPlant></ThemeDataPlant>
         <div v-for="(item,index) in pageData" :key="index">
           <div v-if="item.componentCode=='banner'">
@@ -36,19 +36,19 @@
           <div v-if="item.componentCode == 'float-button'">
             <float-button :datas="item"></float-button>
           </div>
-        </div>
-        <div v-if="item.componentCode == 'goods-search'">
-          <goods-search :datas="item"></goods-search>
-        </div>
-        <div v-if="item.componentCode == 'notice'">
-          <notice :datas="item"></notice>
-        </div>
-        <div v-if="item.componentCode == 'pop-up'">
-          <pop-up :datas="item"></pop-up>
+          <div v-if="item.componentCode == 'goods-search'">
+            <goods-search :datas="item"></goods-search>
+          </div>
+          <div v-if="item.componentCode == 'notice'">
+            <notice :datas="item"></notice>
+          </div>
+          <div v-if="item.componentCode == 'pop-up'">
+            <pop-up :datas="item"></pop-up>
+          </div>
         </div>
       </div>
       <bottomCont></bottomCont>
-    </scroll-view>
+    <!-- </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>
@@ -105,7 +105,7 @@ export default {
             let logoUrl = app.DFSImg(res.data.data.logoUrl,500,400,0);
             resolve({
               title: shopName,
-              path: "page/home/main",
+              path: "/pages/home/main",
               imageUrl:logoUrl,
               success: function(res) {
                 console.log("成功", res);
@@ -151,6 +151,9 @@ export default {
   },
   onShow() {
     setTabBarActive.bind(this)(checkTabbarPage('/'));
+    this.$mp.page.onPageScroll= (el)=>{
+      this.scrolls(el);
+    };
   },
   methods: {
     init(pageList) {
@@ -161,8 +164,9 @@ export default {
       console.log("36", this.pageData);
     },
     scrolls(el){
-      console.log('scroll')
-      this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
+      if(this.$mp.page.selectComponent(".goodsListItem")){
+        this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
+      }
     },
     scrolltolower(){
       console.log("scrolltolower")

static/nativeComponents/GoodsList/index.js

@@ -26,12 +26,14 @@ const componentOptions = {
   // 组件生命周期
   lifetimes: {
     created() {},
-    ready() {},
+    ready() {
+      this.init();
+    },
     moved() {},
     detached() {}
   },
   attached() {
-    this.init();
+    
   },
   definitionFilter() {},
   // 页面生命周期
@@ -220,8 +222,8 @@ const componentOptions = {
             )
           : [];
         item.shopLogoUrl = DFSImg(item.shopLogoUrl);
-        item.coverImage = DFSImg(item.coverImage, 100, 100, 0);
-        item.productImgUrl = DFSImg(item.productImgUrl, 100, 100, 0);
+        item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
+        item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
         item.minPrice = Number(item.minPrice).toFixed(2);
         item.qty = Number(item.qty);
         item.saleQty = Number(item.saleQty);
@@ -242,22 +244,20 @@ const componentOptions = {
           item.getSaleTime = this.getSaleTime(item.saleTime);
         }
       });
-      setTimeout(() => {
-        this.setData({
-          "datas.componentData.goodsList": goodsList
-        });
-        if (type == 1) {
-          // 初始化
-          if (this.selectComponent("#waterfallFlow")) {
-            this.selectComponent("#waterfallFlow").initList();
-          }
-        } else {
-          // 滚动加载
-          if (this.selectComponent("#waterfallFlow")) {
-            this.selectComponent("#waterfallFlow").reLoadPro();
-          }
+      this.setData({
+        "datas.componentData.goodsList": goodsList
+      });
+      if (type == 1) {
+        // 初始化
+        if (this.selectComponent("#waterfallFlow")) {
+          this.selectComponent("#waterfallFlow").initList(goodsList);
         }
-      }, 0);
+      } else {
+        // 滚动加载
+        if (this.selectComponent("#waterfallFlow")) {
+          this.selectComponent("#waterfallFlow").reLoadPro(goodsList);
+        }
+      }
     },
     getSaleTime(val) {
       return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();

static/nativeComponents/TimeLimitedDiscount/activityListItem/index.wxml

@@ -8,7 +8,7 @@
 		{{datas.singleItemActivityName}}
 	</view>
 	<view class="cover">
-		<image mode="center" src="{{datas.singleItemActivityCoverImage}}"></image>
+		<image src="{{datas.singleItemActivityCoverImage}}"></image>
 	</view>
 	<view class="countDown flex" wx:if="{{countDownShow}}">
 		<van-count-down

static/nativeComponents/TimeLimitedDiscount/activityListItem/index.wxss

 .activityListItem {
-  margin-bottom: 20rpx;
   padding: 20rpx 0;
   background: #fff;
   border-radius: 8rpx;
@@ -7,6 +6,7 @@
   -moz-border-radius: 8rpx;
   -ms-border-radius: 8rpx;
   -o-border-radius: 8rpx;
+  margin-bottom: 20rpx;
 }
 .title {
   padding: 8rpx 20rpx;
@@ -23,6 +23,7 @@
 }
 .cover image {
   width: 100%;
+  height: 100%;
 }
 .countDown {
   padding: 4rpx 10rpx;

static/nativeComponents/TimeLimitedDiscount/index.js

@@ -210,6 +210,7 @@ const componentOptions = {
               item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime();
               item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage);
               item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false;
+              console.log(item.isEnd,'-----------------------213');
             })
             this.setData({ "datas.componentData.actList": list });
             if (hideNum == actList.length) {

static/nativeComponents/module/WaterfallFlow/index.js

@@ -54,23 +54,41 @@ Component({
     contentList: [],
     inj: 0,
     clientHeight: 0, //窗口高度
-    goodsNum:0,
+    goodsNum: 0,
   },
   methods: {
     // 初始化数组
-    initList() {
+    initList(goodsList) {
       // 初始化容器
       let { contentList, waterfallDeviationHeight } = this.data;
       contentList[0] = [];
       contentList[1] = [];
-      waterfallDeviationHeight = [0,0];
+      waterfallDeviationHeight = [0, 0];
       this.setData({ contentList, waterfallDeviationHeight });
-      console.log(this.data.note, "-------------------185");
-      this.reLoadPro();
+      this.reLoadPro(goodsList);
     },
-    async reLoadPro() {
-      this.setHeight(this.data.goodsNum);
-      this.setData({ goodsNum:this.data.note.length>0?this.data.note.length+1:0 });
+    async reLoadPro(goodsList) {
+      console.log(goodsList,'----------------------75')
+      // this.setHeight(this.data.goodsNum);
+      this.setHeight1(this.data.goodsNum,goodsList);
+      this.setData({
+        goodsNum:
+        goodsList.length > 0 ? goodsList.length + 1 : 0
+      });
+    },
+    setHeight1(i,goodsList) {
+      let itemList = goodsList.splice(i, goodsList.length);
+      let { contentList } = this.data;
+      itemList.forEach((item, index) => {
+        if (index % 2 == 0) {
+          contentList[0].push(item);
+          console.log(item.productName, "--------位置--左");
+        } else {
+          contentList[1].push(item);
+          console.log(item.productName, "--------位置--右");
+        }
+      });
+      this.setData({ contentList });
     },
     setHeight(i) {
       let _this = this;
@@ -85,24 +103,24 @@ Component({
       let contentList = this.data.contentList;
       contentList[minIndex].push(item);
       this.setData({ contentList });
-       _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();
+      _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 => {
@@ -147,12 +165,13 @@ Component({
         .select("#waterfallFlow")
         .boundingClientRect(function(res) {
           if (res) {
-            console.log(el, "-------------118");
-            console.log(res, "---------------35");
-            let scrollTop = parseInt(el.target.scrollTop);
+            let scrollTop = parseInt(el.scrollTop);
             let domHeight = parseInt(res.height);
             // 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
-            if (scrollTop + _this.data.clientHeight >= domHeight - 150 && finished == false) {
+            if (
+              scrollTop + _this.data.clientHeight >= domHeight - 150 &&
+              finished == false
+            ) {
               _this.triggerEvent("onLoad");
             }
           }

static/nativeComponents/module/WaterfallFlow/index.wxss

@@ -16,4 +16,10 @@ image {
 }
 .container-item:nth-child(2n + 2) {
   padding-left: var(--proGap);
+}
+.loadBottom{
+  text-align: center;
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 10rpx;
 }
\ No newline at end of file