loadmore 7.23

components/shop/list/index.vue

@@ -16,10 +16,14 @@
 				<!-- </scroll-view> -->
 			</swiper-item>
 		</swiper>
+		<!-- 加载更多 -->
+		<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20"></u-loadmore>
+		<!-- <loadmore ref="loadmore" @callback="getGoodsRecommend" bgColor="#FFF" :page="page"></loadmore> -->
     </view>    
 </template>
 <script>
-import item from "./item"
+import item from "./item";
+import loadmore from "@/components/loadmore/index";
 export default {
 	name:"list",
 	data() {
@@ -29,21 +33,48 @@ export default {
 			goodsList: [],
 			classifyList: [],
 			swiperHeight: '',
+			page: 1, // 从 1 开始
+			loadStatus: 'loadmore',
+			timer: true,
 		}
 	},
-    components:{
-        item
+    components: {
+		item,
+		loadmore
 	},
 	watch: {
 		current(index) {
 			const id = this.classifyList[index].gc_id;
-			this.getGoodsRecommend(id);
+			this.getGoodsRecommend({gc_id: id});
 		}
 	},
 	created() {
 		this.getGoodsClassRecommend();
 	},
 	methods: {
+		loadMore(page) {
+			if(!this.timer) return false;
+			this.loadStatus = "loading";
+			this.page++;
+			this.getGoodsRecommend({
+				gc_id: this.classifyList[this.current].gc_id, 
+				page: this.page, 
+				reload: false,
+			}).then(length => {
+				console.log(length);
+				if(length == 0) {
+					this.page--;
+					this.loadStatus = 'nomore';
+				} else {
+					this.loadStatus = 'loading';
+				}
+			}).catch(() => {
+				this.loadStatus = "nomore";
+				this.page--;
+			})
+			// this.$refs.loadmore.reachBottom();
+			// this.getGoodsRecommend(this.classifyList[this.current].gc_id);
+		},
 		getGoodsClassRecommend(gc_id) {
 			this.$u.api.getGoodsClassRecommend().then(res => {
 				if (res.errCode == 0) {
@@ -54,17 +85,18 @@ export default {
 				}
 			})
 		},
-		getGoodsRecommend(gc_id) {
-			this.$u.api.getGoodsRecommend({
-				page: 1,
+		async getGoodsRecommend({ page = this.page, gc_id, reload = true } = {}) {
+			const res = await this.$u.api.getGoodsRecommend({
+				page: page,
 				gc_id: gc_id,
-			}).then(res => {
-				if (res.errCode == 0) {
-					this.goodsList = res.data.goodsList;
-					// console.log(this.goodsList);
-					this.setSwiperHeight();
-				}
 			})
+			if (res.errCode == 0) {
+				if(reload) this.goodsList = res.data.goodsList;
+				else this.goodsList.push(...res.data.goodsList);
+				// console.log(this.goodsList);
+				this.setSwiperHeight();
+			}
+			return res.data.goodsList.length;
 		},
 		setSwiperHeight() {
 			// height: 230px, margin-bottom: 13

components/shop/list/item.vue

@@ -16,7 +16,7 @@ export default {
 	},
 	methods: {
 		toDetailsPage() {
-			this.$u.api.getGoodsDetails({ id: this.info.goods_id }).then((res)=>{
+			this.$u.api.getGoodsDetails({ id: this.info.goods_id }).then(res => {
 				if (res.errCode == 0) {
 					const goods = {
 						goods: res.data,