From 967ce241aff1735e153c739abc15fe718860fdca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=96=BB=E9=B9=8F?= <1242402566@qq.com>
Date: Fri, 29 May 2020 21:15:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommodityCard/CommodityCard.vue | 18 +++++++--
 src/pages/index/index.vue                      | 22 +++++++++--
 src/pages/user/user.vue                        | 55 ++++++++++++++++----------
 3 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/src/components/CommodityCard/CommodityCard.vue b/src/components/CommodityCard/CommodityCard.vue
index 1ce494a..1377acc 100644
--- a/src/components/CommodityCard/CommodityCard.vue
+++ b/src/components/CommodityCard/CommodityCard.vue
@@ -3,10 +3,14 @@
     class="card"
     @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)"
   >
-    <image
+		<easy-loadimage mode="widthFix"
+			:scroll-top="scrollTop"
+			:image-src="goods.imgurl?goods.imgurl:goods.pic"
+			:viewHeight="viewHeight"></easy-loadimage>
+<!-- 	<image
       mode="widthFix"
       :src="goods.imgurl?goods.imgurl:goods.pic"
-    ></image>
+    ></image> -->
     <view class="name">{{goods.name?goods.name:goods.p_name}}</view>
     <view class="info">
       <view class="priceBox">
@@ -22,7 +26,10 @@
 </template>
 
 <script>
+import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue'
+// const MockData = require('@/static/easy-loadimage/mock-data.json')
 export default {
+  components:{easyLoadimage},
   props: {
     /**
     * 商品数据
@@ -37,15 +44,17 @@ export default {
       trade_num: String,
       goodType: String,
     },
-
+	scrollTop:Number,
+	viewHeight:Number,
   },
   created () {
   },
   data () {
     return {
-
+	  
     }
   },
+
   methods: {
     toGoods (id, skId) {
       console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId)
@@ -61,6 +70,7 @@ export default {
 </script>
 
 <style lang="scss">
+
 image {
   width: 100%;
   height: 120rpx;
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index c3d1f00..0787fa4 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -84,6 +84,12 @@
           data-format="Object"
         ></HMfilterDropdown>
         <!-- 商品列表 -->
+<!-- 		<scroll-view
+		  enable-flex
+		  @scrolltolower="handleScrolltolower"
+		  scroll-y
+		  style="height: 1000px;margin-bottom: 20px;"
+		>	 -->
         <view class="goods-list">
           <view class="product-list">
             <view
@@ -91,11 +97,12 @@
               v-for="(goods) in goodsList"
               :key="goods.id"
             >
-              <Card :goods="goods"></Card>
+              <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card>
             </view>
           </view>
           <view class="loading-text">{{loadingText}}</view>
         </view>
+		<!-- </scroll-view> -->
       </view>
     </view>
   </view>
@@ -120,13 +127,22 @@ export default {
       loadingText: '~~到底了~~',
       filterDropdownValue: [],
       filterData: [],
-      searchText: ''
+      searchText: '',
+	  scrollTop: 0,
+	  viewHeight: uni.getSystemInfoSync().windowHeight,
     }
   },
+  onPageScroll({scrollTop}) {
+  	  // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
+	  
+  	  this.scrollTop = scrollTop;
+	  console.log('pagescroll====>',this.viewHeight)
+  },
   computed: {
     goodsList () {
       // 也可以从 getters 获取
-	  // console.log('index-list=====>',this.$store.state.index.list)
+	  // console.log('index-list=====>',this.$store.state.index.pageList)
+	  
       return this.$store.state.index.list
     },
     categoryList () {
diff --git a/src/pages/user/user.vue b/src/pages/user/user.vue
index 50e71be..297b866 100644
--- a/src/pages/user/user.vue
+++ b/src/pages/user/user.vue
@@ -36,10 +36,16 @@
         <button @tap="chatOur(2)">客服2</button>
       </view>
     </uni-popup>
-    <view
-      v-if="isAuth"
-      class="content"
-    >
+<!-- 	<scroll-view
+	  enable-flex
+	  @scrolltolower="handleScrolltolower"
+	  scroll-y
+	  style="height: 1000px;"
+	> -->
+   <view
+	  v-if="isAuth"
+	  class="content"
+	>
       <view class="userInfo">
         <view class="info">
           <image
@@ -190,24 +196,26 @@
         </view>
         <!-- 商品列表 -->
         <view class="goods-list">
-          <scroll-view
+<!--          <scroll-view
             enable-flex
             @scrolltolower="handleScrolltolower"
             scroll-y
             class="product-list"
-          >
+          > -->
+		  <view class="product-list">
             <view
               class="product"
               v-for="(item, index) in userRecommandList"
               :key="index"
             >
-              <Card :goods="item"></Card>
+              <Card :goods="item" :scrollTop="scrollTop" :viewHeight="viewHeight"></Card>
             </view>
-          </scroll-view>
+		  </view>
+          <!-- </scroll-view> -->
           <view class="loading-text">{{loadingText}}</view>
         </view>
       </view>
-    </view>
+	</view>
     <view
       v-else
       class="auth"
@@ -222,6 +230,7 @@
         @getuserinfo="onGotUserInfo"
       >授权登陆</button>
     </view>
+	<!-- </scroll-view> -->
   </view>
 </template>
 
@@ -239,9 +248,16 @@ export default {
     return {
       isAuth: true, // 是否显示授权页面,
       pagesnum: 1, // 分页请求初始值
-      whichTap: 0 // 弹窗渲染选择条件
+      whichTap: 0 ,// 弹窗渲染选择条件
+	  loadingText: '到底了',
+	  scrollTop: 0,
+	  viewHeight: uni.getSystemInfoSync().windowHeight,
     }
   },
+  onPageScroll({scrollTop}) {
+  	  // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
+  	  this.scrollTop = scrollTop;
+  },
   onLoad() {
     // 判断是否授权
     uni.getSetting({
@@ -260,6 +276,15 @@ export default {
       page: this.pagesnum
     })
   },
+  onReachBottom() {
+    // console.log('usr-my',this.$store.state.user.userInfo)
+    this.pagesnum++
+    store.dispatch('userRecommand/getRecommandList', {
+	  uid: this.$store.state.user.userInfo.uid,
+	  openid: this.$store.state.user.userInfo.openid,
+	  page: this.pagesnum
+    })
+  },
   computed: {
     nickName() {
       return this.$store.state.user.userInfo.nickName
@@ -330,15 +355,6 @@ export default {
       uni.navigateTo({
         url: '../addOpticsData/addOpticsData'
       })
-    },
-    handleScrolltolower() {
-      // console.log('usr-my',this.$store.state.user.userInfo)
-      this.pagesnum++
-      store.dispatch('userRecommand/getRecommandList', {
-        uid: this.$store.state.user.userInfo.uid,
-        openid: this.$store.state.user.userInfo.openid,
-        page: this.pagesnum
-      })
     }
   }
 }
@@ -573,7 +589,6 @@ export default {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-	  height: 400px;
       .product {
         width: 48%;
         margin: 0 0 20rpx 0;
-- 
2.0.0