滚动方式加载列表

pages/index/components/goods.vue

@@ -21,9 +21,9 @@
                 <text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text>
               </view>
 			  <!-- 标的所有者的信息 -->
-	<!-- 		  <view class="detail-owner oneline-hide">
+			  <view class="detail-owner oneline-hide">
 				  <text class="oneline-hide"> {{dataItem.username}} </text>
-			  </view> -->
+			  </view>
 				  
             </view>
           </block>

pages/index/index.vue

@@ -29,30 +29,66 @@
 	  </view>
 	  <!-- 商品列表 -->
 	  <view class="glistzone">
-		  <Goods :dataList="gdlist" />
+		  <view class="diy-goods">
+		    <view class="goods-list display__list column__2">
+			<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption" @up="upCallback">
+			  <view class="goods-item" v-for="(dataItem, index) in gdlist.data" :key="index" @click="onTargetGoods(dataItem.goods_islicode)">
+			    <!-- 多列商品 -->
+			    <block>
+			      <!-- 标的图片 -->
+			      <view class="goods-image">
+			        <image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
+			      </view>
+			      <view class="detail">
+			        <!-- 标的标题 -->
+			        <view class="goods-name">
+			          <text class="twoline-hide">{{ dataItem.goods_name }}</text>
+			        </view>
+			        <!-- 标的价格 && 销量-->
+			        <view class="detail-price oneline-hide">
+			          <text class="goods-price f-30 col-m">￥ {{ dataItem.price }}</text>
+			          <text class="sale-count col-9 f-24">销量：{{ dataItem.sale_count }}</text>
+			        </view>
+			  	  <!-- 标的所有者的信息 -->
+			  	  <view class="detail-owner oneline-hide">
+			  		  <text class="oneline-hide"> {{dataItem.username}} </text>
+			  	  </view>
+			  		  
+			      </view>
+			    </block>
+			  
+			  </view>
+			  </mescroll-body>
+			  </view>
+			  </view>
+	
 	  </view>
 	
   </view>
 </template>
 
 <script>
-  import { setCartTabBadge } from '@/core/app'
-  import * as Api from '@/api/page'
-  // import Page from '@/components/page'
   import Banner from './components/banner'
   import Search from './components/search'
-  import Goods from './components/goods'
-  
   import * as Gapi from '@/api/goods'
+  // 滚动加载
+  import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
+  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
+  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
 
   const App = getApp()
   
+  // 每页记录数量
+  const pageSize = 15
+
   export default {
     components: {
       Banner,
 	  Search,
-	  Goods
+	  //  滚动标签
+	  MescrollBody
     },
+	mixins: [MescrollMixin],
     data() {
       return {
         // 页面参数
@@ -60,7 +96,22 @@
 		// 图片列表
 		imglist:[],
 		// 商品列表
-		gdlist:[]
+		gdlist: getEmptyPaginateObj(),
+		// 上拉加载配置
+		upOption: {
+		  // 首次自动执行
+		  auto: true,
+		  // 每页数据的数量; 默认10
+		  page: { size: pageSize },
+		  // 数量要大于4条才显示无更多数据
+		  noMoreSize: 4,
+		  // 空布局
+		  empty: {
+		    tip: '暂无记录'
+		  }
+		},
+		// 控制onShow事件是否刷新订单列表
+		canReset: false,
 		
       }
     },
@@ -71,19 +122,32 @@
     onLoad(options) {
       // 当前页面参数
       this.options = options
+	  // 注册全局事件订阅: 是否刷新列表
+	  uni.$on('syncRefresh', canReset => {
+	    this.canReset = canReset
+	  })
     },
 	
 	/**
 	 * 生命周期函数--监听页面显示
 	 */
 	onShow() {
-      // 更新购物车角标
+	  this.canReset && this.onRefreshList()
-      setCartTabBadge()
+	  this.canReset = false
+	},
+	/**
+	 * 生命周期函数--监听页面的卸载
+	 */
+	onUnload() {
+	  // 卸载全局事件订阅
+	  uni.$off('syncRefresh')
 	},
+
+
 	mounted() {
 		this.getBannerList();
 		//
-		this.getHomeList();
+		//this.getHomeList();
 	},
 
     methods: {
@@ -97,62 +161,70 @@
 				console.log(err)
 			});
 		},
+		
 		//商品列表
-		getHomeList(){
+		getHomeList(pageNo = 1){
-			// 搜索的内容
+			const app = this
 			// 必须的字段
 			let stimestamp = new Date().getTime() 
-			let rqdata = {"pay_type":2,"goods_status":1,"page":1,"limit":6}
+			// promise 方式
-			// let rqdata = {"pay_type":2,"goods_status":1,"page":1,"limit":6,timestamp:stimestamp} 
+			return new Promise((resolve, reject) => {
-			//let rqdata={pay_type: 1,record_type: 2,goods_status: 1,page: 1,limit: 6}
+				let rqdata = {"pay_type":2,"goods_status":1,"page":pageNo,"limit":pageSize}
-			Gapi.soglist(rqdata)
+				// 获取列表
-			// Gapi.nbgoods(rqdata)
+				Gapi.nbgoods(rqdata)
-			// Gapi.souser({appkey:"006",timestamp:stimestamp,page:1,limit:16})
 				.then(res=>{
-				console.log("res",res)
+					// 合并新数据
-				this.gdlist = res.data
+					const newList = app.initList(res.data)
-			}).catch(err=>{
+					console.log(newList,"newlist")
-				console.log(err)
+					app.gdlist.data = getMoreListData(newList, app.gdlist, pageNo)
-			});
+					resolve(newList)
-		}
+				})
+			})
+			
 
 		},
 		
 		/**
-     * 下拉刷新
+		 * 上拉加载的回调 (页面初始化时也会执行一次)
+		 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+		 * @param {Object} page
 		 */
-    onPullDownRefresh() {
+		upCallback(page) {
-      // 获取首页数据
+		  const app = this
-      this.getPageData(() => {
+		  // 设置列表数据
-        uni.stopPullDownRefresh()
+		  app.getHomeList(page.num)
+		    .then(list => {
+		      const curPageLen = list.data.length
+		      const totalSize = list.data.total
+		      app.mescroll.endBySize(curPageLen, totalSize)
 		    })
+		    .catch(() => app.mescroll.endErr())
+			// 标的列表
+			
+		},
+		
+		// 初始化订单列表数据
+		initList(newList) {
+		  newList.data.forEach(item => {
+			item.username = item.user.name
+		  })
+		  return newList
+		},
+		
+		// 刷新订单列表
+		onRefreshList() {
+		  this.gdlist = getEmptyPaginateObj()
+				
+		  setTimeout(() => {
+		    this.mescroll.resetUpScroll()
+		  }, 120)
 		},
 		
-    /**
-     * 分享当前页面
-     */
-    onShareAppMessage() {
-      const app = this
-      const { page } = app
-      return {
-        title: page.params.share_title,
-        path: "/pages/index/index?" + app.$getShareUrlParams()
-      }
     },
 
-    /**
+
-     * 分享到朋友圈
+
-     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
+
-     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
-     */
-    onShareTimeline() {
-      const app = this
-      const { page } = app
-      return {
-        title: page.params.share_title,
-        path: "/pages/index/index?" + app.$getShareUrlParams()
-      }
-    }
 
   }
 </script>
@@ -216,4 +288,176 @@
 	}
   }
   
+  .diy-goods {
+    .goods-list {
+      padding: 4rpx;
+      box-sizing: border-box;
+  
+      .goods-item {
+  		// background-color: #fff;
+        box-sizing: border-box;
+        padding: 16rpx;
+  
+        .goods-image {
+          position: relative;
+          width: 100%;
+          height: 0;
+          padding-bottom: 100%;
+          overflow: hidden;
+          background: #fff;
+  
+          &:after {
+            content: '';
+            display: block;
+            margin-top: 100%;
+          }
+  
+          .image {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            -o-object-fit: cover;
+            object-fit: cover;
+          }
+        }
+  
+        .detail {
+          padding: 8rpx;
+          background: #fff;
+  		  border-radius: 0 0 6% 6%;
+  		  box-shadow: #333 2rpx 3rpx 2rpx;
+  
+          .goods-name {
+            min-height: 68rpx;
+            line-height: 1.3;
+            white-space: normal;
+            color: #484848;
+            font-size: 26rpx;
+          }
+  
+          .detail-price {
+            .goods-price {
+  				font-weight: 800;
+  				margin-right: 8rpx;
+            }
+  
+            .sale-count {
+  				maring-left:20rpx;
+              font-size: 18rpx;
+            }
+          }
+  		  
+  		  .detail-owner{
+  			  padding: 4rpx;
+  			  font-size: 22rpx;
+  			  color: #999;
+  			  margin-left: 10rpx;
+  		  }
+  		  
+        }
+      }
+  
+      &.display__slide {
+        white-space: nowrap;
+        font-size: 0;
+  
+        .goods-item {
+          display: inline-block;
+        }
+      }
+  
+      &.display__list {
+        .goods-item {
+          float: left;
+        }
+      }
+  
+      &.column__2 {
+        .goods-item {
+          width: 50%;
+        }
+      }
+  
+      &.column__3 {
+        .goods-item {
+          width: 33.33333%;
+        }
+      }
+  
+      &.column__1 {
+        .goods-item {
+          width: 100%;
+          height: 280rpx;
+          margin-bottom: 12rpx;
+          padding: 20rpx;
+          box-sizing: border-box;
+          background: #fff;
+          line-height: 1.6;
+  
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+  
+        .goods-item_left {
+          display: flex;
+          width: 40%;
+          background: #fff;
+          align-items: center;
+  
+          .image {
+            display: block;
+            width: 240rpx;
+            height: 240rpx;
+          }
+        }
+  
+        .goods-item_right {
+          position: relative;
+          width: 60%;
+  
+          .goods-name {
+            margin-top: 20rpx;
+            min-height: 68rpx;
+            line-height: 1.3;
+            white-space: normal;
+            color: #484848;
+            font-size: 26rpx;
+          }
+        }
+  
+        .goods-item_desc {
+          margin-top: 8rpx;
+        }
+  
+        .desc-selling_point {
+          width: 400rpx;
+          font-size: 24rpx;
+          color: #e49a3d;
+        }
+  
+        .desc-goods_sales {
+          color: #999;
+          font-size: 24rpx;
+        }
+  
+        .desc_footer {
+          font-size: 24rpx;
+  
+          .price_x {
+            margin-right: 16rpx;
+            color: #f03c3c;
+            font-size: 30rpx;
+          }
+  
+          .price_y {
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+  
 </style>