loadmore 7.27

pageB/comment/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="comment">
+	<scroll-view scroll-y class="comment" @scrolltolower="loadMore">
 		<view class="label-list">
 			<view v-for="(label, index) in evaluateSpec" :key="index" :class="{'active': current == index}" @click="current=index">{{ index + '(' + label + '}' }}</view>
 		</view>
@@ -9,7 +9,9 @@
 			</view>
 			<u-empty text="暂无评论" mode="list" v-if="!evalueList.length" margin-top="120" color="#333"></u-empty>
 		</view>
-	</view>
+		<!-- 加载更多 -->
+		<u-loadmore :status="loadStatus" bgColor="#EEEBEE" margin-top="20" margin-bottom="20" v-if="evalueList.length >= 12"></u-loadmore>
+	</scroll-view>
 </template>
 <script>
 import comment from "@/components/comment/index";
@@ -21,6 +23,8 @@ export default {
 			page: 0,
 			evalueList: [],
 			evaluateSpec: {},
+			loadStatus: 'loadmore',
+			timer: true,
 		}
 	},
 	components: {
@@ -33,13 +37,31 @@ export default {
 	},
 	watch: {
 		current(value) {
-			this.getAllEvalue(value);
+			this.page = 0;
+			this.getAllEvalue({ type: value });
 		}
 	},
 	methods: {
+		loadMore() {
+			if(this.evalueList.length < 12) return false;
+			if(!this.timer) return false;
+			this.loadStatus = "loading";
+			this.page++;
+			this.getAllEvalue({ type: this.current, load: 'more' }).then(length => {
+				if(length == 0) {
+					this.page--;
+					this.loadStatus = 'nomore';
+				} else {
+					this.loadStatus = 'loading';
+				}
+			}).catch(() => {
+				this.loadStatus = "nomore";
+				this.page--;
+			})
+		},
 		getEvaluateSpec() {
 			this.$u.api.getEvaluateSpec({
-				id: this.id
+				id: this.id,
 			}).then(res => {
 				if(res.errCode == 0) {
 					this.evaluateSpec = res.data;
@@ -47,19 +69,20 @@ export default {
 				}
 			})
 		},
-		getAllEvalue(type) {
+		async getAllEvalue({ type, load } = {}) {
 			let params = {
 				goods_id: this.id, 
 				page: this.page,
 			}
 			if(type) Object.assign(params, { type: type });
-			this.$u.api.getAllEvalue(params).then(res => {
-				if(res.errCode == 0) {
-					this.evalueList = res.data;
-				} else {
-					this.evalueList = [];
-				}
-			})
+			const res = await this.$u.api.getAllEvalue(params);
+			if (res.errCode == 0) {
+				if(load) this.evalueList.push(...res.data);
+				else this.evalueList = res.data;
+			} else {
+				this.evalueList = [];
+			}
+			return res.data.length;
 		}
 	}
 };