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 v-for="(_, index1) in 25" :key="index1" class="slider" @changing="sliderChanging" :value="sliderValue"
          :block-size="sliderBlockSize" :show-value="true" />
      </view>
      <view class="flex-fill">
        <slider v-for="(_, index2) in 25" :key="index2" class="slider" @changing="sliderChanging" :value="sliderValue"
          :block-size="sliderBlockSize" :show-value="true" />
      </view>
      <view class="flex-fill">
        <slider v-for="(_, index3) in 25" :key="index3" class="slider" @changing="sliderChanging" :value="sliderValue"
          :block-size="sliderBlockSize" :show-value="true" />
      </view>
      <view class="flex-fill">
        <slider v-for="(_, index4) in 25" :key="index4" class="slider" @changing="sliderChanging" :value="sliderValue"
          :block-size="sliderBlockSize" :show-value="true" />
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

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

<style>
  .page {
    flex: 1;
  }

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

  .flex-fill {
    flex: 1;
  }

  .first-slider {
    margin: 12px 0;
    background-color: rgba(0, 0, 0, 0.1);
  }

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