Slider

Slider 滑动条

简介

1.0 开始加入

何时使用

滑动条,一般在面板内部用于处理可上报下发的数值型dp点。

代码演示

水平滑动条

import React, { Component } from 'react';
import { View } from 'react-native';
import { Slider } from 'tuya-panel-kit';

export default class SliderHorizontalScene extends Component {
state = {
value: 0,
}

_handleComplete = value => {
this.setState({ value: Math.round(value) });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Slider.Horizontal
style={{ width: 295 }}
maximumValue={100}
minimumValue={0}
value={this.state.value}
maximumTrackTintColor="rgba(0, 0, 0, 0.1)"
minimumTrackTintColor="#4397D7"
onSlidingComplete={this._handleComplete}
/>
</View>
);
}
}

垂直滑动条

import React, { Component } from 'react';
import { View } from 'react-native';
import { Slider } from 'tuya-panel-kit';

export default class SliderVerticalScene extends Component {
state = {
value: 24,
}

_handleComplete = value => {
this.setState({ value: Math.round(value) });
}

render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Slider.Vertical
style={{ height: 200 }}
value={this.state.value}
minimumValue={0}
maximumValue={100}
minimumTrackTintColor="#4A90E2"
maximumTrackTintColor="#50E3C2"
/>
</View>
);
}
}

交互演示

API

style

容器样式

类型(Type) 必传(Required)
ViewProptypes.style

trackStyle

轨道样式

类型(Type) 必传(Required)
ViewProptypes.style

thumbStyle

滑块样式

类型(Type) 必传(Required)
ViewProptypes.style

horizontal

是否为水平方向

类型(Type) 必传(Required) 默认值
boolean true

disabled

是否禁用

类型(Type) 必传(Required) 默认值
boolean false

value

当前值

类型(Type) 必传(Required) 默认值
number 0

minimumValue

最小值

类型(Type) 必传(Required) 默认值
number 0

maximumValue

最大值

类型(Type) 必传(Required) 默认值
number 1

stepValue

步长,必须可被minimumValue和maximumValue整除

类型(Type) 必传(Required) 默认值
number 0

reverseValue

是否反转值

类型(Type) 必传(Required) 默认值
boolean false

onlyMaximumTrack

是否只显示大于当前值的轨道颜色

类型(Type) 必传(Required) 默认值
boolean false

debugTouchArea

是否开启debug模式

类型(Type) 必传(Required) 默认值
boolean false

canTouchTrack

触摸轨道是否可以更改值

类型(Type) 必传(Required) 默认值
boolean false

minimumTrackTintColor

小于当前值的轨道颜色

类型(Type) 必传(Required) 默认值
Color ‘#3f3f3f’

maximumTrackTintColor

大于当前值的轨道颜色

类型(Type) 必传(Required) 默认值
Color ‘#b3b3b3’

thumbTintColor

滑块颜色

类型(Type) 必传(Required) 默认值
Color ‘#343434’

thumbTouchSize

滑块可触摸范围

类型(Type) 必传(Required) 默认值
object { width: 40, height: 40 }

renderMinimumTrack

定制渲染小于当前值的轨道

类型(Type) 必传(Required) 默认值
() => void null

renderMaximumTrack

定制渲染大于当前值的轨道

类型(Type) 必传(Required) 默认值
() => void null

renderThumb

定制渲染滑块

类型(Type) 必传(Required) 默认值
() => void null

onSlidingStart

滑动开始回调

类型(Type) 必传(Required) 默认值
() => void null

onValueChange

滑动值变更回调

类型(Type) 必传(Required) 默认值
() => void null

onSlidingComplete

滑动结束回调

类型(Type) 必传(Required) 默认值
() => void null

onScrollEvent

滑动回调

类型(Type) 必传(Required) 默认值
() => void null

children

子节点

类型(Type) 必传(Required) 默认值
any null

animateTransition

是否开启动画转场效果

类型(Type) 必传(Required) 默认值
boolean false

animationType

动画类型

类型(Type) 必传(Required) 默认值
enum: 'spring','timing' ‘timing’

animationConfig

动画配置

类型(Type) 必传(Required) 默认值
object null

方法

名称 描述
Vertical 垂直的Slider
Horizontal 水平的Slider
dpView 适配dp点schema的Slider

电话咨询

在线咨询

400-881-8611