slider-100.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="page">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view class="flex-row">
      <view class="flex-fill">
        <slider ref="slider1" v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging"
          @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"
          @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"
          @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"
          @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        title: 'slider 滑块 x 100',
        sliderValue: 50
      }
    },
    methods: {
      sliderChange(e : SliderChangeEvent) {
        this.updateSliderValue(e.detail.value)
      },
      sliderChanging(e : SliderChangeEvent) {
        this.updateSliderValue(e.detail.value)
      },
      updateSliderValue(value : Number) {
        // this.sliderValue = value

        // TODO 跳过vue框架，直接修改原生组件
        (this.$refs["slider1"]! as SliderElement[]).forEach((item) => {
          item.value = value
        });
        (this.$refs["slider2"]! as SliderElement[]).forEach((item) => {
          item.value = value
        });
        (this.$refs["slider3"]! as SliderElement[]).forEach((item) => {
          item.value = value
        });
        (this.$refs["slider4"]! as SliderElement[]).forEach((item) => {
          item.value = value
        });
      }
    },
  }
</script>

<style>
  .page {
    flex: 1;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-fill {
    flex: 1;
  }

  .slider {
    margin: 1px 0.5px;
  }
</style>