-

zhangwei

2025-03-05 16213c0f85aa3ac8317797bf4a05fd12940e16d3

 src/uni_modules/uview-plus/components/u-slider/u-slider.vue

@@ -58,7 +58,7 @@
               <view class="u-slider__button-wrap u-slider__button-wrap-0" @touchstart="onTouchStart($event, 0)"
                  @touchmove="onTouchMove($event, 0)" @touchend="onTouchEnd($event, 0)"
                  @touchcancel="onTouchEnd($event, 0)" :style="{left: (getPx(barStyle0.width) + getPx(blockSize)/2) + 'px'}">
                  <slot v-if="$slots.default  || $slots.$default"/>
                  <slot name="min" v-if="$slots.min || $slots.$min"/>
                  <view v-else class="u-slider__button" :style="[blockStyle, {
                     height: getPx(blockSize, true),
                     width: getPx(blockSize, true),
@@ -69,7 +69,8 @@
            <view class="u-slider__button-wrap" @touchstart="onTouchStart"
               @touchmove="onTouchMove" @touchend="onTouchEnd"
               @touchcancel="onTouchEnd" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
               <slot v-if="$slots.default  || $slots.$default"/>
               <slot name="max" v-if="isRange && ($slots.max || $slots.$max)"/>
               <slot v-else-if="$slots.default || $slots.$default"/>
               <view v-else class="u-slider__button" :style="[blockStyle, {
                  height: getPx(blockSize, true),
                  width: getPx(blockSize, true),
@@ -155,8 +156,17 @@
         value(n) {
            // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
            if(this.status == 'end') this.updateValue(this.value, false);
         }
         },
         // #endif
         rangeValue:{
               handler(n){
               if(this.status == 'end'){
                  this.updateValue(this.rangeValue[0], false, 0);
                  this.updateValue(this.rangeValue[1], false, 1);
               }
               },
               deep:true
           }
      },
      created() {
      },
@@ -166,6 +176,10 @@
            // #ifndef APP-NVUE
            this.$uGetRect('.u-slider__base').then(rect => {
               this.sliderRect = rect;
               // console.log('sliderRect', this.sliderRect)
               if (this.sliderRect.width == 0) {
                  console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
               }
               this.init()
            });
            // #endif
@@ -265,8 +279,8 @@
            this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
            this.status = 'moving';
            // 发出moving事件
            this.$emit('changing');
            this.updateValue(this.newValue, true, index);
            let $crtFmtValue = this.updateValue(this.newValue, true, index);
            this.$emit('changing', $crtFmtValue);
         },
         onTouchMove(event, index = 1) {
            if (this.disabled) return;
@@ -274,7 +288,7 @@
            // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
            if (this.status == 'start') this.$emit('start');
            let touches = event.touches[0];
            console.log('touchs', touches)
            // console.log('touchs', touches)
            // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
            let clientX = 0;
            // #ifndef APP-NVUE
@@ -289,33 +303,34 @@
            this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
            this.status = 'moving';
            // 发出moving事件
            this.$emit('changing');
            this.updateValue(this.newValue, true, index);
            let $crtFmtValue = this.updateValue(this.newValue, true, index);
            this.$emit('changing', $crtFmtValue);
         },
         onTouchEnd(event, index = 1) {
            if (this.disabled) return;
            if (this.status === 'moving') {
               this.updateValue(this.newValue, false, index);
               this.$emit('change');
               let $crtFmtValue = this.updateValue(this.newValue, false, index);
               this.$emit('change', $crtFmtValue);
            }
            this.status = 'end';
         },
         onTouchStart2(event, index = 1) {
            if (!this.isRange) {
               this.onChangeStart(event, index);
               // this.onChangeStart(event, index);
            }
         },
         onTouchMove2(event, index = 1) {
            if (!this.isRange) {
               this.onTouchMove(event, index);
               // this.onTouchMove(event, index);
            }
         },
         onTouchEnd2(event, index = 1) {
            if (!this.isRange) {
               this.onTouchEnd(event, index);
               // this.onTouchEnd(event, index);
            }
         },
         onClick(event) {
            // if (this.isRange) return;
            if (this.disabled) return;
            // 直接点击滑块的情况，计算方式与onTouchMove方法相同
            // console.log('click', event)
@@ -368,7 +383,11 @@
               default:
                  break;
            }
				
            if (this.isRange) {
               return this.rangeValue
            } else {
               return valueFormat
            }
         },
         format(value, index = 1) {
            // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
@@ -376,15 +395,15 @@
               switch (index) {
                  case 0:
                     return Math.round(
                        Math.max(this.min, Math.min(value, this.rangeValue[1] - this.step,this.max))
                        / this.step
                     ) * this.step;
                        Math.max(this.min, Math.min(value, this.rangeValue[1] - parseInt(this.step),this.max))
                        / parseInt(this.step)
                     ) * parseInt(this.step);
                     break;
                  case 1:
                     return Math.round(
                        Math.max(this.min, this.rangeValue[0] + this.step, Math.min(value, this.max))
                        / this.step
                     ) * this.step;
                        Math.max(this.min, this.rangeValue[0] + parseInt(this.step), Math.min(value, this.max))
                        / parseInt(this.step)
                     ) * parseInt(this.step);
                     break;
                  default:
                     break;
@@ -392,8 +411,8 @@
            } else {
               return Math.round(
                  Math.max(this.min, Math.min(value, this.max))
                  / this.step
               ) * this.step;
                  / parseInt(this.step)
               ) * parseInt(this.step);
            }
         }
      }
@@ -414,6 +433,8 @@

      &-inner {
         flex: 1;
         display: flex;
         flex-direction: column;
         position: relative;
         border-radius: 999px;
         padding: 10px 18px;