Browse Source

商品分页

lilei 4 years ago
parent
commit
e47750c541
1 changed files with 33 additions and 3 deletions
  1. 33 3
      pages/goods/goods.vue

+ 33 - 3
pages/goods/goods.vue

@@ -3,6 +3,7 @@
 		<view class="info">该类商品需购满{{goldLimit}}乐豆才能下单哦!</view>
 		<view v-if="goodsList.length">
 			<uni-coods :list="goodsList"></uni-coods>
+			<view class="loadmore"><u-loadmore @loadmore="loadmore" :status="status" /></view>
 		</view>
 		<!-- 购物车 -->
 		<uni-cart-fix></uni-cart-fix>
@@ -19,8 +20,10 @@
 				clsId: '',
 				goldLimit:0,
 				pageNo: 1,
-				pageSize: 20,
-				goodsList:[]
+				pageSize: 6,
+				goodsList:[],
+				status: 'loadmore',
+				count: 0
 			};
 		},
 		onLoad(opts) {
@@ -39,11 +42,35 @@
 				}).then(res => {
 					console.log(res,'goodsList')
 					if(res.status == 200){
-						this.goodsList = res.data.list
+						this.count = res.data.count
+						if(this.pageNo == 1){
+							this.goodsList = res.data.list
+							if(res.data.list.length == this.count){
+								this.status = 'nomore'
+							}else{
+								this.status = 'loadmore'
+							}
+						}else{
+							this.goodsList = this.goodsList.concat(res.data.list)
+							this.goodsList.splice()
+							this.status = 'loadmore'
+						}
 					}
 				})
+			},
+			loadmore(){
+				if(this.count <= this.goodsList.length) {
+					this.status = 'nomore'
+				}else{
+					this.status = 'loading'
+					this.pageNo = ++ this.pageNo
+					this.getGoods()
+				}
 			}
 		},
+		onReachBottom() {
+			this.loadmore()
+		}
 	}
 </script>
 
@@ -68,5 +95,8 @@
 			color: #DD524D;
 			margin-bottom: 20upx;
 		}
+		.loadmore{
+			padding: 20upx 0;
+		}
 	}
 </style>