title: Slider

sidebar_label: Slider

滑动选择器

参考文档

类型

  1. ComponentType<SliderProps>

示例代码

  1. export default class PageView extends Component {
  2. constructor() {
  3. super(...arguments)
  4. }
  5. render() {
  6. return (
  7. <View className='components-page'>
  8. <Text>设置 step</Text>
  9. <Slider step={1} value={50}/>
  10. <Text>显示当前 value</Text>
  11. <Slider step={1} value={50} showValue/>
  12. <Text>设置最小/最大值</Text>
  13. <Slider step={1} value={100} showValue min={50} max={200}/>
  14. </View>
  15. )
  16. }
  17. }

SliderProps

参数 类型 默认值 必填 说明
min number 0 最小值
max number 100 最大值
step number 1 步长,取值必须大于 0,并且可被(max - min)整除
disabled boolean false 是否禁用
value number 0 当前取值
color string "#e9e9e9" 背景条的颜色(请使用 backgroundColor)
selectedColor string "#1aad19" 已选择的颜色(请使用 activeColor)
activeColor string "#1aad19" 已选择的颜色
backgroundColor string "#e9e9e9" 背景条的颜色
blockSize number 28 滑块的大小,取值范围为 12 - 28
blockColor string "#ffffff" 滑块的颜色
showValue boolean false 是否显示当前 value
onChange BaseEventOrigFunction<onChangeEventDetail> 完成一次拖动后触发的事件
onChanging BaseEventOrigFunction<onChangeEventDetail> 拖动过程中触发的事件

API 支持度

API 微信小程序 百度小程序 支付宝小程序 字节跳动小程序 H5 React Native
SliderProps.min ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.max ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.step ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.disabled ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.value ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.color ✔️ ✔️
SliderProps.selectedColor ✔️ ✔️
SliderProps.activeColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.backgroundColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.blockSize ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.blockColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.showValue ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.onChange ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
SliderProps.onChanging ✔️ ✔️ ✔️ ✔️ ✔️ ✔️

onChangeEventDetail

API 支持度

API 微信小程序 百度小程序 支付宝小程序 字节跳动小程序 H5 React Native
Slider ✔️ ✔️ ✔️ ✔️ ✔️ ✔️