pageC/spike/index.vue

@@ -1,7 +1,7 @@
 <template>
-	<view class="spike">
+	<scroll-view class="spike" scroll-y @scrolltolower="onreachBottom">
 		<view class="title">
-            <view class="name">全部秒杀</view>
+      <view class="name">全部秒杀</view>
 			<view class="time">
 				<text class="num">{{ seckillTime.littleHour || '00' }}</text>
 				<text class="mah">:</text>
@@ -19,8 +19,9 @@
 		<view class="spike-list">
 			<SpecialGoods v-for="(item, index) in spikeList" :key="index" :item="item" type='spike'></SpecialGoods>
 			<u-empty mode="list" v-if="!spikeList.length" :margin-top="240"></u-empty>
+			<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" @loadmore="onreachBottom"></u-loadmore>
 		</view>
-	</view>
+	</scroll-view>
 </template>
 <script>
 import SpecialGoods from "@/components/shop/special-shop/index"
@@ -29,27 +30,50 @@ export default {
 		return {
 			spikeList: [],
 			page: 0,
-			seckillTime: {}
+			seckillTime: {},
+			timer: true, // 限制下拉刷新
+			loadStatus: 'loadmore',
 		}
 	},
 	components: {
 		SpecialGoods
 	},
 	onShow() {
-		this.getSpikeList();
+		this.getSpikeList({ load: "reload" });
 	},
 	methods: {
 		// 全部秒杀
-		getSpikeList() {
-			this.$u.api.getSpikeList({ page: this.page }).then(res => {
-				console.log(res)
-				if(res.errCode == 0) {
-					this.spikeList = res.data.list;
-					this.seckillTime = {
-						bigHour: res.data.bigHour,
-						littleHour: res.data.littleHour,
-					}
+		async getSpikeList({ load }) {
+			const res = await this.$u.api.getSpikeList({
+				page: this.page,
+			})
+			this.timer = true;
+			if (res.errCode == 0) {
+				this.seckillTime = {
+					bigHour: res.data.bigHour,
+					littleHour: res.data.littleHour,
 				}
+				if(load == 'reload') this.spikeList = res.data.list;
+				else if(load == 'loadmore') this.spikeList.push(...res.data.list);
+			}
+			this.$forceUpdate();
+			return res.data.list.length;
+		},
+		onreachBottom() {
+			if(!this.timer) return false;
+			this.loadStatus = "loading";
+			this.page++;
+			this.getSpikeList({ load: "loadmore" }).then(length => {
+				// console.log(length);
+				if(length == 0) {
+					this.page--;
+					this.loadStatus = 'nomore';
+				} else {
+					this.loadStatus = 'loadmore';
+				}
+			}).catch(() => {
+				this.loadStatus = "nomore";
+				this.page--;
 			})
 		},
 	}
@@ -57,9 +81,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .spike{
-	min-height: calc(100vh - var(--window-top));
+	height: calc(100vh - var(--window-top));
 	padding: 30rpx;
 	border-top: 1rpx solid rgba(236,236,236,1);
+	box-sizing: border-box;
 	.title{
 		margin-bottom: 30rpx;
 		display: flex;