邓洁 : 首页分页加载

pages/index/index.vue

@@ -49,7 +49,8 @@
 				searchPageSize: 5,
 				shopPageNum: 1,
 				searchPageNum: 1,
-
+				shopListLength: '',
+				shopSearchListLength: '',
 			}
 		},
 		onLoad() {
@@ -61,6 +62,16 @@
 			this.open()
 			this.getClassList()
 		},
+		onReachBottom() {
+			if (this.chooseIndex == 0 && this.shopListLength !== 0) {
+				this.shopPageNum++
+				this.getShopList()
+			}
+			if (this.chooseIndex == 1 && this.shopSearchListLength !== 0) {
+				this.searchPageNum++
+				this.getSearchList()
+			}
+		},
 		methods: {
 			getBanner() {
 				this.$api.getBanner().then(res => {
@@ -88,10 +99,11 @@
 					pageNum: this.shopPageNum
 				})
 				this.$api.getShopList(query).then(res => {
-					this.shopInfoList = res.data.data
-					this.shopInfoList.forEach(item=>{
+					res.data.data.forEach(item => {
 						item.pics = this.$api.imgUrl + item.pics
 					})
+					this.shopListLength = res.data.data.length
+					this.shopInfoList = [...this.shopInfoList, ...res.data.data]
 				})
 			},
 			getSearchList() {
@@ -101,11 +113,12 @@
 					pageNum: this.searchPageNum
 				})
 				this.$api.getShopList(query).then(res => {
-					this.searchInfoList = res.data.data
+					this.shopSearchListLength = res.data.data.length
+					// 用于触底刷新  为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
+					this.searchInfoList = [...this.searchInfoList, ...res.data.data]
 					console.log(this.searchInfoList);
 				})
-			}
-			,
+			},
 			getClassList() {
 				this.$api.getClassList().then(res => {
 					let data = res.data.data