1

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page1" :class="{'is-sticky': lastScrollTop>stickyTrigger}">
 		<view class="swiper-container">
-			<view class="swiper-page" v-if="currentIndex == 0">
+			<view class="swiper-page" v-show="currentIndex == 0">
 				<view style="position: relative;height: 545rpx;">
 					<view style="width:100%;height: 260rpx;position: fixed;top: 0;background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;z-index: 90;"
 						v-if="lastScrollTop>stickyTrigger"></view>
@@ -459,6 +459,7 @@
 								</view>
 								<view class="dispatch-action-box" :class="{'dispatch-action-box--single': checked != 'zhipai'}">
 									<view class="qiangdan-btn" :id="'swipe-order-' + item.id"
+										:class="{'qiangdan-btn--swiping': swipeOrder.id === item.id && swipeOrder.index === index, 'qiangdan-btn--low-perf': swipeOrderLowPerf}"
 										@tap.stop="noop"
 										@touchstart.stop="startSwipeOrder($event,item,index)"
 										@touchmove.stop.prevent="moveSwipeOrder"
@@ -790,9 +791,10 @@
 				getshopArea: [],
 				putshopArea: [],
 				totalPages: 1,
+				swipeOrderLowPerf: false,
 				swipeOrderDefaultStyle: {
-					progress: 'width: 0%;',
+					progress: 'transform: translate3d(0, 0, 0) scaleX(0); transition: transform 0.14s ease-out;',
-					thumb: 'left: 0%; transform: translateX(-0%);'
+					thumb: 'transform: translate3d(0, 0, 0); transition: transform 0.14s ease-out;'
 				},
 				swipeOrder: {
 					id: '',
@@ -800,8 +802,8 @@
 					startX: 0,
 					startProgress: 0,
 					progress: 0,
-					progressStyle: 'width: 0%;',
+					progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
-					thumbStyle: 'left: 0%; transform: translateX(-0%);',
+					thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
 					trackWidth: 0,
 					confirmed: false
 				}
@@ -908,10 +910,7 @@
 			}
 		},
 		onShow() {
-			this.indexInit()
+			this.runHomeInit()
-			this.$nextTick(() => {
-				this.refreshDaimaiStickyPosition()
-			})
 			if (this.pendingTabIndex !== null) {
 				const tabIndex = this.pendingTabIndex
 				this.pendingTabIndex = null
@@ -927,6 +926,13 @@
 			}, 500);
 		},
 		methods: {
+			runHomeInit() {
+				// 保证首页数据实时：每次显示首页都重新初始化数据。
+				this.indexInit()
+				this.$nextTick(() => {
+					this.refreshDaimaiStickyPosition()
+				})
+			},
 			refreshDaimaiStickyPosition() {
 				const query = uni.createSelectorQuery().in(this);
 				query.select('#menuList').boundingClientRect(rect => {
@@ -1013,6 +1019,12 @@
 				const info = uni.getSystemInfoSync();
 				this.navBarHeight = info.statusBarHeight;
 				this.swipeOrderBaseWidth = info.windowWidth * 0.86;
+				this.swipeOrderThumbWidth = uni.upx2px ? uni.upx2px(82) : 41;
+				const iosVersionMatch = info.platform === 'ios' && info.system ? String(info.system).match(/\d+/) : null;
+				const iosMajorVersion = iosVersionMatch ? Number(iosVersionMatch[0]) : 0;
+				this.swipeOrderLowPerf = iosMajorVersion >= 26;
+				this.swipeOrderFrameGap = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 36 : 24) : 16;
+				this.swipeOrderProgressStep = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 4 : 2) : 1;
 			},
 			clearCheck() {
 				this.checkYongjin = false
@@ -1052,14 +1064,16 @@
 				if (!this.requireLogin(0)) return
 				const touch = event.touches && event.touches[0]
 				if (!touch) return
+				this._swipeOrderProgress = 0
+				this._swipeOrderLastRenderTime = 0
 				this.swipeOrder = {
 					id: item.id,
 					index,
 					startX: touch.clientX,
 					startProgress: 0,
 					progress: 0,
-					progressStyle: 'width: 0%;',
+					progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
-					thumbStyle: 'left: 0%; transform: translateX(-0%);',
+					thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
 					trackWidth: this.swipeOrderBaseWidth || 0,
 					confirmed: false
 				}
@@ -1077,6 +1091,16 @@
 				const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 1
 				const deltaX = Math.max(0, touch.clientX - this.swipeOrder.startX)
 				const progress = Math.min(100, Math.round(deltaX / (trackWidth * 0.72) * 100))
+				this._swipeOrderProgress = progress
+				const now = Date.now()
+				const frameGap = this.swipeOrderFrameGap || 16
+				const progressStep = this.swipeOrderProgressStep || 1
+				if (now - (this._swipeOrderLastRenderTime || 0) < frameGap &&
+					Math.abs(progress - this.swipeOrder.progress) < progressStep &&
+					progress < 92) {
+					return
+				}
+				this._swipeOrderLastRenderTime = now
 				this.setSwipeOrderProgress(progress)
 			},
 			//滑动结束
@@ -1086,7 +1110,8 @@
 					return
 				}
 				if (this.swipeOrder.id !== item.id || this.swipeOrder.index !== index) return
-				if (this.swipeOrder.progress >= 92 && !this.swipeOrder.confirmed) {
+				const progress = this._swipeOrderProgress !== undefined ? this._swipeOrderProgress : this.swipeOrder.progress
+				if (progress >= 92 && !this.swipeOrder.confirmed) {
 					this.swipeOrder.confirmed = true
 					this.setSwipeOrderProgress(100)
 					this.getOrder(item, index)
@@ -1095,24 +1120,28 @@
 				this.resetSwipeOrder()
 			},
 			resetSwipeOrder() {
+				this._swipeOrderProgress = 0
+				this._swipeOrderLastRenderTime = 0
 				this.swipeOrder = {
 					id: '',
 					index: -1,
 					startX: 0,
 					startProgress: 0,
 					progress: 0,
-					progressStyle: 'width: 0%;',
+					progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
-					thumbStyle: 'left: 0%; transform: translateX(-0%);',
+					thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
 					trackWidth: 0,
 					confirmed: false
 				}
 			},
 			setSwipeOrderProgress(progress) {
 				if (this.swipeOrder.progress === progress) return
-				const progressValue = progress + '%'
+				const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 0
+				const thumbWidth = this.swipeOrderThumbWidth || 0
+				const thumbOffset = Math.max(0, trackWidth - thumbWidth) * progress / 100
 				this.swipeOrder.progress = progress
-				this.swipeOrder.progressStyle = 'width: ' + progressValue + ';'
+				this.swipeOrder.progressStyle = 'transform: translate3d(0, 0, 0) scaleX(' + (progress / 100) + '); transition: none;'
-				this.swipeOrder.thumbStyle = 'left: ' + progressValue + '; transform: translateX(-' + progressValue + ');'
+				this.swipeOrder.thumbStyle = 'transform: translate3d(' + thumbOffset + 'px, 0, 0); transition: none;'
 			},
 			noop() {},
 			pageshow(){
@@ -1720,7 +1749,7 @@
 				
 				switch (index) {
 					case 0:
-						this.indexInit()
+						this.runHomeInit()
 						break;
 					case 1:
 						that.$refs.deLiveryPage.init()
@@ -2535,7 +2564,7 @@
 		margin-left: auto;
 		padding: 0 14rpx;
 		border-radius: 999rpx;
-		background: rgba(255, 117, 88, 0.14);
+		/* background: rgba(255, 117, 88, 0.14); */
 		color: #ff6a42;
 		font-size: 20rpx;
 		font-weight: 900;
@@ -2974,7 +3003,7 @@
 		bottom: 12rpx;
 		height: 8rpx;
 		border-radius: 999rpx;
-		background: linear-gradient(90deg, rgba(27, 191, 156, 0.42) 0%, rgba(255, 220, 120, 0.64) 58%, rgba(255, 255, 255, 0.24) 100%);
+		/* background: linear-gradient(90deg, rgba(27, 191, 156, 0.42) 0%, rgba(255, 220, 120, 0.64) 58%, rgba(255, 255, 255, 0.24) 100%); */
 		z-index: 1;
 	}
 
@@ -3501,13 +3530,42 @@
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
 		position: relative;
 		overflow: hidden;
+		touch-action: pan-y;
+	}
+
+	.qiangdan-btn--swiping {
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 6rpx 14rpx rgba(0, 35, 28, 0.04);
+	}
+
+	.qiangdan-btn--swiping .qiangdan-progress {
+		background: rgba(108, 226, 202, 0.52);
+	}
+
+	.qiangdan-btn--swiping .qiangdan-thumb {
+		box-shadow: 0 4rpx 12rpx rgba(0, 35, 28, 0.1);
+	}
+
+	.qiangdan-btn--low-perf {
+		box-shadow: none;
+	}
+
+	.qiangdan-btn--low-perf .qiangdan-progress {
+		background: rgba(108, 226, 202, 0.42);
+	}
+
+	.qiangdan-btn--low-perf .qiangdan-thumb {
+		box-shadow: none;
 	}
 
 	.qiangdan-progress {
+		width: 100%;
 		height: 100%;
 		border-radius: 999rpx;
 		background: linear-gradient(90deg, rgba(166, 255, 234, 0.42) 0%, rgba(108, 226, 202, 0.78) 100%);
-		transition: width 0.16s ease-out;
+		transform: translate3d(0, 0, 0) scaleX(0);
+		transform-origin: left center;
+		will-change: transform;
+		backface-visibility: hidden;
 	}
 
 	.qiangdan-text {
@@ -3541,7 +3599,8 @@
 		color: #1b7a69;
 		font-size: 28rpx;
 		font-weight: 900;
-		transition: left 0.16s ease-out, transform 0.16s ease-out;
+		will-change: transform;
+		backface-visibility: hidden;
 	}
 
 	.dispatch-action-box {