slider-100.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view class="uni-padding-wrap">
      <slider
        class="first-slider"
        @changing="sliderChanging"
        :value="sliderValue"
        :backgroundColor="sliderBackgroundColor"
        :activeColor="sliderActiveColor"
        :blockColor="sliderBlockColor"
        :show-value="true"
      />
      <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>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="ts">
export default {
  data() {
    return {
      title: 'slider 滑块 x 100',
      sliderValue: 50,
      sliderBlockSize: 20,
      sliderBackgroundColor: '#000000',
      sliderActiveColor: '#FFCC33',
      sliderBlockColor: '#8A6DE9',
    }
  },
  methods: {
    sliderChanging(e: SliderChangeEvent) {
      this.sliderValue = e.detail.value
    },
  },
}
</script>

<style>
.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>