Version: next

Slider

滑动选择器

参考文档

类型

ComponentType<SliderProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}
render() {
return (
<View className='components-page'>
<Text>设置 step</Text>
<Slider step={1} value={50}/>
<Text>显示当前 value</Text>
<Slider step={1} value={50} showValue/>
<Text>设置最小/最大值</Text>
<Slider step={1} value={100} showValue min={50} max={200}/>
</View>
)
}
}

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微信小程序百度小程序支付宝小程序字节跳动小程序H5React 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微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
Slider✔️✔️✔️✔️✔️✔️