qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Slider 滑动条

允许用户在一个区间中选择特定值

使用指南

在 Taro 文件中引入组件

import { AtSlider } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/slider.scss";

一般用法

<template>
 <view>
  <AtSlider />
 </view>
</template>

传入当前值

<template>
 <view>
  <AtSlider :value="50" />
 </view>
</template>

设置步长

取值必须大于 0，并且可被(max - min)整除

<template>
 <view>
  <AtSlider :step="2" />
 </view>
</template>

设置取值范围

<template>
 <view>
  <AtSlider :min="2" :max="60" />
 </view>
</template>

自定义样式

<template>
 <view>
  <AtSlider :step="1" :value="50" :blockSize="24 activeColor='#4285F4' backgroundColor='#BDBDBD' blockColor='#4285F4'/>
 </view>
</template>

禁用状态

<template>
 <view>
  <AtSlider :step="1" :value="50" :blockSize="24 showValue disabled/>
 </view>
</template>

AtSlider 参数

参数说明类型可选值默认值
min最小值Number-0
max最大值Number-100
step步长，取值必须大于0，并且可被 max - min 整除Number-1
disabled是否禁用Boolean-false
value当前取值Number-0
activeColor已选择的颜色Color-#6190e8
backgroundColor背景条的颜色Color-#e9e9e9
blockSize滑块的大小，取值范围为 12-28Number-28
blockColor滑块的颜色Color-#ffffff
showValue是否显示当前的 ValueBoolean-false

AtSlider 事件

事件名称说明返回参数
onChange完成一次拖动后触发的事件，event.detail = {'{ value: value }'}value
onChanging拖动过程中触发的事件，event.detail = {'{ value: value }'}value