slider-100: 点击时更新其它 slider

pages/component/slider-100/slider-100.uvue

@@ -6,19 +6,19 @@
     <view class="flex-row">
       <view class="flex-fill">
         <slider ref="slider1" v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging"
-          :value="sliderValue" :block-size="20" :show-value="true" />
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
       </view>
       <view class="flex-fill">
         <slider ref="slider2" v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging"
-          :value="sliderValue" :block-size="20" :show-value="true" />
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
       </view>
       <view class="flex-fill">
         <slider ref="slider3" v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging"
-          :value="sliderValue" :block-size="20" :show-value="true" />
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
       </view>
       <view class="flex-fill">
         <slider ref="slider4" v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging"
-          :value="sliderValue" :block-size="20" :show-value="true" />
+          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -35,28 +35,33 @@
       }
     },
     methods: {
+      sliderChange(e : SliderChangeEvent) {
+        this.updateSliderValue(e.detail.value)
+      },
       sliderChanging(e : SliderChangeEvent) {
-        // this.sliderValue = e.detail.value
+        this.updateSliderValue(e.detail.value)
+      },
+      updateSliderValue(value : Number) {
+        // this.sliderValue = value
 
         // TODO 跳过vue框架，直接修改原生组件
-        const sliderValue = e.detail.value;
         (this.$refs["slider1"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = sliderValue
+          item.$data["$sliderValue"] = value
           item.$callMethod("_onRender")
         });
         (this.$refs["slider2"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = sliderValue
+          item.$data["$sliderValue"] = value
           item.$callMethod("_onRender")
         });
         (this.$refs["slider3"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = sliderValue
+          item.$data["$sliderValue"] = value
           item.$callMethod("_onRender")
         });
         (this.$refs["slider4"]! as ComponentPublicInstance[]).forEach((item) => {
-          item.$data["$sliderValue"] = sliderValue
+          item.$data["$sliderValue"] = value
           item.$callMethod("_onRender")
         });
-      },
+      }
     },
   }
 </script>
@@ -77,4 +82,4 @@
   .slider {
     margin: 1px 0.5px;
   }
-</style>
+</style>
\ No newline at end of file