Slider

滑动选择器

参考文档

类型

  1. ComponentType<SliderProps>

示例代码

  • React
  • Vue
  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. }
  1. <template>
  2. <view class="components-page">
  3. <text>设置 step</text>
  4. <slider step="1" value="50"/>
  5. <text>显示当前 value</text>
  6. <slider step="1" value="50" :show-value="true" />
  7. <text>设置最小/最大值</text>
  8. <slider step="1" value="100" :show-value="true" min="50" max="200"/>
  9. </view>
  10. </template>

SliderProps

参数类型默认值必填说明
minnumber0最小值
maxnumber100最大值
stepnumber1步长,取值必须大于 0,并且可被(max - min)整除
disabledbooleanfalse是否禁用
valuenumber0当前取值
colorstring“#e9e9e9”背景条的颜色(请使用 backgroundColor)
selectedColorstring“#1aad19”已选择的颜色(请使用 activeColor)
activeColorstring“#1aad19”已选择的颜色
backgroundColorstring“#e9e9e9”背景条的颜色
blockSizenumber28滑块的大小,取值范围为 12 - 28
blockColorstring“#ffffff”滑块的颜色
showValuebooleanfalse是否显示当前 value
onChangeBaseEventOrigFunction<onChangeEventDetail>完成一次拖动后触发的事件
onChangingBaseEventOrigFunction<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✔️✔️✔️✔️✔️✔️