slider-100.uvue

<template>
  <view class="uni-padding-wrap">
    <page-head :title="title"></page-head>
    <view class="flex-row">
      <view class="flex-fill">
        <view v-for="(_, index1) in 33" :key="index1">
          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
        </view>
      </view>
      <view class="flex-fill">
        <view v-for="(_, index2) in 33" :key="index2">
          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
        </view>
      </view>
      <view class="flex-fill">
        <view v-for="(_, index3) in 33" :key="index3">
          <slider @changing="sliderChanging" :value="sliderValue" :block-size="15" :show-value="true" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        title: 'slider 滑块 x 100',
        sliderValue: 0
      }
    },
    methods: {
      sliderChanging(e : SliderChangeEvent) {
        this.sliderValue = e.detail.value
        console.log('value 发生变化：' + e.detail.value)
      }
    }
  }
</script>

<style>
  .flex-row {
    flex-direction: row;
  }
  .flex-fill {
    flex: 1;
  }
</style>