Bläddra i källkod

app分页查询功能优化

@dongkboy 6 dagar sedan
förälder
incheckning
8b1ae2f3b4
3 ändrade filer med 614 tillägg och 507 borttagningar
  1. 43 12
      pages/message/message.vue
  2. 528 483
      pages/orders/orders.vue
  3. 43 12
      pages/quote/quoteRecords.vue

+ 43 - 12
pages/message/message.vue

@@ -94,7 +94,7 @@
 				</view>
 			</view>
 		</view>
-		<u-loadmore :status="status" />
+		<u-loadmore v-if="datalist.length!=0" :status="status" />
 
 		
 		<u-popup :show="qrcodePopup" mode="center" round="20rpx" closeable mask-close-able @close="qrcodePopup = false">
@@ -150,22 +150,50 @@ export default {
 	},
 	onLoad() { },
 	onReachBottom() {
-		if (this.pageQuery.pages >= this.totalPages) return;
-		this.status = 'loading';
-		this.pageQuery.pages = ++this.pageQuery.pages;
-		setTimeout(async () => {
-			let res = await this.$http.post('/message/messageList', this.pageQuery);
-			if (res.code == '200') {
-				this.datalist = [...this.datalist, ...res.data.records]
-			}
-			if (this.pageQuery.pages >= this.totalPages) this.status = 'nomore';
-			else this.status = 'loading';
-		}, 1000)
+		this.loadNextPage(); //触底加载(加载中/没有更多时内部自动忽略)
 	},
 	computed: {
 
 	},
 	methods: {
+		// 加载下一页(触底与自动补屏共用)
+		loadNextPage() {
+			if (this.status == 'loading' || this.status == 'nomore') return; //加载中/没有更多:忽略
+			this.status = 'loading';
+			this.pageQuery.pages = this.pageQuery.pages + 1;
+			setTimeout(async () => {
+				let res = await this.$http.post('/message/messageList', this.pageQuery);
+				if (res.code == '200') {
+					this.datalist = [...this.datalist, ...res.data.records];
+					this.totalPages = res.data.pages; //以接口返回的总页数为准
+					if (this.pageQuery.pages >= this.totalPages) this.status = 'nomore';
+					else this.status = 'loadmore'; //还有下一页:回到"加载更多"
+					this.autoLoadMore(); //追加后若仍不满一屏,继续自动补页
+				} else {
+					this.status = 'loadmore'; //请求失败:回到"加载更多",允许重试
+				}
+			}, 1000)
+		},
+		// 列表内容不满一屏时自动加载,直到占满或没有更多(消息少于一屏时触底事件不会触发)
+		autoLoadMore() {
+			this.$nextTick(() => {
+				uni.createSelectorQuery().in(this)
+					.select('.content').boundingClientRect()
+					.selectViewport().boundingClientRect()
+					.exec((res) => {
+						if (!res || !res[0] || !res[1]) return;
+						// 内容底部已超出可视区底部:已占满一屏,无需补页
+						if (res[0].bottom >= res[1].height) return;
+						// 没有更多数据:直接置为"没有更多"
+						if (this.pageQuery.pages >= this.totalPages) {
+							if (this.datalist.length > 0) this.status = 'nomore';
+							return;
+						}
+						// 还有数据:自动翻页(loadNextPage 成功后还会再次检查)
+						this.loadNextPage();
+					});
+			});
+		},
 		//获取未读数量
 		async getMessageCount() {
 			let res = await this.$http.get('/message/getMessageCount')
@@ -184,6 +212,8 @@ export default {
 		},
 		//获取信息
 		async getmessage() {
+			this.pageQuery.pages = 1; //每次重新查询都从第一页开始
+			this.status = 'loadmore'; //重置加载状态
 			let res = await this.$http.post('/message/messageList', this.pageQuery)
 			if (res.code == 200) {
 				res.data.records.map(val => {
@@ -202,6 +232,7 @@ export default {
 				})
 				this.datalist = res.data.records;
 				this.totalPages = res.data.pages; //总页数
+				this.autoLoadMore(); //数据不满一屏时自动补页/置为"没有更多"
 			}
 		},
 		// 

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 528 - 483
pages/orders/orders.vue


+ 43 - 12
pages/quote/quoteRecords.vue

@@ -94,17 +94,7 @@
 			}
 		},
 		onReachBottom() {
-			if (this.pageRequest.pages >= this.totalPages) return;
-			this.status = 'loading';
-			this.pageRequest.pages = ++this.pageRequest.pages;
-			setTimeout(async () => {
-				let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
-				if (res.code == '200') {
-					this.quoteRecordsList = [...this.quoteRecordsList, ...res.data.records];
-				}
-				if (this.pageRequest.pages >= this.totalPages) this.status = 'nomore';
-				else this.status = 'loading';
-			}, 1000)
+			this.loadNextPage(); //触底加载(加载中/没有更多时内部自动忽略)
 		},
 		onShow() {
 
@@ -117,12 +107,53 @@
 			}
 		},
 		methods: {
+			// 加载下一页(触底与自动补屏共用)
+			loadNextPage() {
+				if (this.status == 'loading' || this.status == 'nomore') return; //加载中/没有更多:忽略
+				this.status = 'loading';
+				this.pageRequest.pages = this.pageRequest.pages + 1;
+				setTimeout(async () => {
+					let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
+					if (res.code == '200') {
+						this.quoteRecordsList = [...this.quoteRecordsList, ...res.data.records];
+						this.totalPages = res.data.pages; //以接口返回的总页数为准
+						if (this.pageRequest.pages >= this.totalPages) this.status = 'nomore';
+						else this.status = 'loadmore'; //还有下一页:回到"加载更多"
+						this.autoLoadMore(); //追加后若仍不满一屏,继续自动补页
+					} else {
+						this.status = 'loadmore'; //请求失败:回到"加载更多",允许重试
+					}
+				}, 1000)
+			},
+			// 列表内容不满一屏时自动加载,直到占满或没有更多(报价记录少于一屏时触底事件不会触发)
+			autoLoadMore() {
+				this.$nextTick(() => {
+					uni.createSelectorQuery().in(this)
+						.select('.data-content').boundingClientRect()
+						.selectViewport().boundingClientRect()
+						.exec((res) => {
+							if (!res || !res[0] || !res[1]) return;
+							// 内容底部已超出可视区底部:已占满一屏,无需补页
+							if (res[0].bottom >= res[1].height) return;
+							// 没有更多数据:直接置为"没有更多"
+							if (this.pageRequest.pages >= this.totalPages) {
+								if (this.quoteRecordsList.length > 0) this.status = 'nomore';
+								return;
+							}
+							// 还有数据:自动翻页(loadNextPage 成功后还会再次检查)
+							this.loadNextPage();
+						});
+				});
+			},
 			//报价记录
 			async fetchQuoteHistory() {
+				this.pageRequest.pages = 1; //每次重新查询都从第一页开始
+				this.status = 'loadmore'; //重置加载状态
 				let res = await this.$http.post('/supplementOrder/getHistoryQuoteList', this.pageRequest);
 				if (res.code == 200) {
 					this.quoteRecordsList = res.data.records;
 					this.totalPages = res.data.pages;
+					this.autoLoadMore(); //数据不满一屏时自动补页/置为"没有更多"
 				}
 			},
 			async quoteHistory(licenseNo) {
@@ -136,7 +167,7 @@
 			//重新报价
 			revisedQuote(orderNo) {
 				uni.navigateTo({
-					url: "/pages/quote/premiumCalc1?ordersNo=" + orderNo
+					url: "/pages/quote/premiumCalc?ordersNo=" + orderNo
 				})
 			},
 			//报价历史查询

Vissa filer visades inte eftersom för många filer har ändrats