slider.uvue

<template>
  <view class="uni-padding-wrap">
    <page-head :title="title"></page-head>
    <view class="uni-title">显示当前value</view>
    <view>
      <slider @change="sliderChange" :value="50" :show-value="true" />
    </view>

    <view class="uni-title">设置步进step跳动</view>
    <view>
      <slider @change="sliderChange" :value="60" :step="5" />
    </view>

    <view class="uni-title">设置最小/最大值</view>
    <view>
      <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
    </view>

    <view class="uni-title">不同颜色和大小的滑块</view>
    <view>
      <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
        :block-size="sliderBlockSize" />
    </view>
  </view>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        title: 'slider 滑块',
        sliderValue: 50,
        sliderBlockSize: 20,
        sliderBackgroundColor: '#000000',
        sliderActiveColor: '#FFCC33',
        sliderBlockColor: '#8A6DE9',
      }
    },
    methods: {
      sliderChange(e : SliderChangeEvent) {
        console.log('value 发生变化：' + e.detail.value)
      }
    }
  }
</script>

<style>
</style>