Procházet zdrojové kódy

fix(equipList2): 修复滑块交互和布局样式问题

1. 调整action-container的布局实现方式,移除内联gap改为通过margin和last-child适配
2. 修复多滑块场景下的选择器查询逻辑,使用selectAll获取所有进度条
3. 简化滑块的触摸事件绑定,移除不必要的stop和prevent修饰符
4. 统一两处开度数值滑块的DOM结构,优化页面排版
allen před 2 týdny
rodič
revize
cf9fb6ff76
1 změnil soubory, kde provedl 19 přidání a 16 odebrání
  1. 19 16
      pages/equipList2/index.vue

+ 19 - 16
pages/equipList2/index.vue

@@ -114,7 +114,7 @@
             			<text>{{getopeningValue(item.sensor_params)}}%</text>
 								</view>
 							</view>
-							<view class="action-container" v-if="type_id == 49">
+							<view class="action-container" style="display:flex;align-items: center;" v-if="type_id == 49">
 								<view class="action-container-item" :class="n.switchValue?'action-container-container-item-active':''" v-for="(n,key) in getvalve_params(item)" :key="key">
 									<view class="action-open">
 										<view class="item-number" :class="n.switchValue?'item-number-active':''">{{n.name}}</view>
@@ -163,15 +163,14 @@
 					<view @click="show2 = true" class="minute">{{minute}} 分钟</view>
 				</u-form-item>
 				<u-form-item label="开度数值">
-					<view class="slider-container">
+					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
           <view class="slider-min-value">10</view>
           <view
             class="custom-progress"
             @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
-            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 100)"
+            @touchmove="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
-            @tap.stop="onSliderTap($event, 'openingValue', 10, 100)"
-          >
+>
             <view class="progress-track">
               <view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
               <view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
@@ -179,7 +178,7 @@
           </view>
           <view class="slider-max-value">100</view>
         </view>
-				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
+				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text></view>
 				</u-form-item>
 				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
 			</u-form>
@@ -187,15 +186,14 @@
 		<u-popup v-model="showPopup2" mode="bottom">
 			<u-form :model="form" label-width="160rpx" :label-style="{marginLeft:'20rpx'}">
 				<u-form-item label="开度数值">
-					<view class="slider-container">
+					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
           <view class="slider-min-value">10</view>
           <view
             class="custom-progress"
             @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
-            @touchmove.stop.prevent="onSliderTouchMove($event, 10, 100)"
+            @touchmove="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
-            @tap.stop="onSliderTap($event, 'openingValue', 10, 100)"
-          >
+>
             <view class="progress-track">
               <view class="progress-fill" :style="{ width: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
               <view class="progress-thumb" :style="{ left: getProgressWidth(equipContrlForm.openingValue, 10, 100) + '%' }"></view>
@@ -203,7 +201,7 @@
           </view>
           <view class="slider-max-value">100</view>
         </view>
-				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text>
+				<text style="margin-left: 20rpx">{{equipContrlForm.openingValue}}</text></view>
 				</u-form-item>
 				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit2">提交</u-button>
 			</u-form>
@@ -429,14 +427,16 @@ import openingDegree from '../assets/openingDegree.png';
 				}
 			},
 			onSliderTouchStart(e, field, min, max) {
+				const clientX = e.touches[0].clientX
 				this.sliderField = field
 				this.sliderMin = min
 				this.sliderMax = max
 				const query = uni.createSelectorQuery().in(this)
-				query.select('.custom-progress').boundingClientRect(rect => {
-					this.sliderRect = rect
+				query.selectAll('.custom-progress').boundingClientRect(rects => {
+					const list = Array.isArray(rects) ? rects : []
+					this.sliderRect = list.find(r => r && r.width > 0) || list[0] || null
+					this.updateSliderValue(clientX, field, min, max)
 				}).exec()
-				this.updateSliderValue(e.touches[0].clientX, field, min, max)
 			},
 			onSliderTouchMove(e, min, max) {
 				if (!this.sliderField || !this.sliderRect) return
@@ -453,7 +453,7 @@ import openingDegree from '../assets/openingDegree.png';
 				}).exec()
 			},
 			updateSliderValue(clientX, field, min, max) {
-				if (!this.sliderRect) return
+				if (!this.sliderRect || !this.sliderRect.width) return
 				let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
 				ratio = Math.max(0, Math.min(1, ratio))
 				const value = Math.round(min + ratio * (max - min))
@@ -1313,7 +1313,6 @@ import openingDegree from '../assets/openingDegree.png';
 	.action-container{
 		display: flex;
 		align-items: center;
-		gap: 16rpx;
 		.action-container-item{
 			flex:1;
 			height: 90rpx;
@@ -1321,6 +1320,10 @@ import openingDegree from '../assets/openingDegree.png';
 			background: #ffffff;
 			padding: 8rpx;
 			border: 2rpx solid #999999;
+			margin-right: 16rpx;
+			&:last-child{
+				margin-right: 0;
+			}
 		}
 		.action-container-container-item-active{
 			border: 2rpx solid #0BBC58;