1

components/tab-bar/delivery.vue

@@ -69,7 +69,7 @@
 			</view>
 		</view>
 		<view class="content">
-			<scroll-view @scrolltolower="onReachPage" @scroll="handleScroll" :scroll-top="scrollTop" scroll-y style="width:100%;height: 620px;overflow: scroll;">
+			<scroll-view id="orderScroll" class="order-scroll" @scrolltolower="onReachPage" @scroll="handleScroll" :scroll-top="scrollTop" lower-threshold="160" scroll-y>
 				<view class="box1" v-for="(item,index) in pageData" :key="index">
 					<view class="maotou" v-if="item.deliveryType == 1">
 						<text>{{item.numberCode.length>14 ?'多订单':item.numberCode | delPlus}}</text>
@@ -355,7 +355,7 @@
 				</view>
 			</uni-popup>
 
-			<view style="width: 100%;height: 160rpx;"></view>
+			<view class="list-bottom-space"></view>
 			<uni-load-more :status="loadStatus" @change="onChange" />
 		</view>
 	</view>
@@ -372,6 +372,8 @@
 				menuButtonInfo: {},
 				scrollTop: 0,
 				oldScrollTop: 0,
+				isLoadingPage: false,
+				scrollViewHeight: 0,
 				isArea: false,
 				latitude: 39.909, // 默认纬度，可以设为用户当前位置或配送员位置
 				longitude: 116.39742, // 默认经度
@@ -411,10 +413,7 @@
 
 		},
 		onReachBottom() {
-			if (this.searchForm.pageNum >= this.totalPages) return;
-			// this.status = 'loading';
-			this.searchForm.pageNum++;
-			this.getDelivery();
+			this.onReachPage();
 		},
 		filters: {
 			formatHourMinute(value) {
@@ -474,6 +473,9 @@
 				}
 				this.$forceUpdate()
 				this.getDelivery()
+				this.$nextTick(() => {
+					this.measureScrollView()
+				})
 
 			},
 			// 获取用户位置
@@ -496,12 +498,28 @@
 				});
 			},
 			onReachPage() {
-				if (this.searchForm.pageNum >= this.totalPages) return;
+				if (this.isLoadingPage || this.searchForm.pageNum >= this.totalPages) return;
+				this.isLoadingPage = true;
 				this.searchForm.pageNum++;
 				this.getDelivery();
 			},
 			handleScroll(e) {
 				this.oldScrollTop = e.detail.scrollTop
+				const detail = e.detail || {};
+				const viewHeight = this.scrollViewHeight || 0;
+				const reachBottom = viewHeight > 0 && detail.scrollTop + viewHeight >= detail.scrollHeight - 180;
+				if (reachBottom) {
+					this.onReachPage();
+				}
+			},
+			measureScrollView() {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('#orderScroll').boundingClientRect();
+				query.exec((res) => {
+					if (res && res[0] && res[0].height) {
+						this.scrollViewHeight = res[0].height;
+					}
+				});
 			},
 			scrollToTop() {
 				this.scrollTop = this.oldScrollTop
@@ -544,7 +562,9 @@
 			},
 			getDelivery() {
 				let that = this
+				that.isLoadingPage = true;
 				this.tui.request("/mall/delivery/pagebyworker", "POST", this.searchForm, false, false).then((res) => {
+					that.isLoadingPage = false;
 					that.loadStatus = 'nomore';
 					if (res.code == 200) {
 						if (this.searchForm.status == 1) {
@@ -570,7 +590,9 @@
 						return;
 					}
 					uni.hideLoading();
-				}).catch((res) => {});
+				}).catch((res) => {
+					that.isLoadingPage = false;
+				});
 			},
 			//查看大图
 			largeImg(img) {
@@ -902,11 +924,25 @@
 	.content {
 		flex: 1;
 		width: 95%;
-		overflow-y: auto;
-		-webkit-overflow-scrolling: touch;
+		min-height: 0;
+		overflow: hidden;
 		margin: 20rpx auto 0;
 	}
 
+	.order-scroll {
+		width: 100%;
+		height: 100%;
+		overflow: scroll;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+	}
+
+	.list-bottom-space {
+		width: 100%;
+		height: calc(160rpx + constant(safe-area-inset-bottom));
+		height: calc(160rpx + env(safe-area-inset-bottom));
+	}
+
 	.box1 {
 		width: 100%;
 		margin: 20rpx auto 20rpx;