标度数值滑动条

更新时间:2021-12-16 03:47:38

ScaleSlider

示图展示

标度数值滑动条

组件简介

ScaleSlider部分属性继承自数值滑动条NumberSlider

组件属性

字段名 类型 描述 默认值
value Number 当前值 0
min Number 允许滑动的最小值 0
max Number 允许滑动的最大值 1000
step Number 滑动时的步长 1
disabled Bool 是否禁用 false
trackColor String 轨道颜色 ‘rgba(0,0,0,.4)’
tintColor String 激活的轨道颜色 ‘#fff’
invalidSwipeDistance Number 滑动生效的开始距离 7
clickEnabled Bool 是否可以点击选择 true
trackSlideEnabled Bool 是否可以能过轨道直接滑动 false
showTint Bool 是否显示激活轨道 true
direction String 滑动方向
‘horizontal’ 或 ‘vertical’
‘horizontal’
reverse Bool 是否反向滑动
当为水平滑动条时,默认滑条的最小值在左边,设置reverse = true后,最小值在右边
当为垂直滑动条时,默认滑条的最小值在下边,设置reverse = true后,最小值在上边
false
showAnimation Bool 使用动画显示 true
thumbTouchSize Obj 拖动时,滑动的有效触控区大小 { width: 40, height: 40 }
accessibilityLabel String 测试标位 ‘numberSlider’
thumbLimitType String 滑块的可滑动范围类型
inner 为滑动范围为滑块内,滑动不会超出轨道的范围
outer 为滑动范围可超出轨道范围,滑动时滑块中心位置可与轨道的边重叠
‘inner’
onGrant Func 滑动开始事件
onMove Func 滑动中事件
onRelease Func 滑动结束事件
onPress Func 点击事件
当 clickEnabled = true时,有效
onChange Func 值改变时间
用户主动交互时,如果滑动条的数据值有变化,会触发此事件
onThumbChange Func 滑块变动时触发事件,回调包含两个参数offset, value
offset为滑块的相对轨道最小值一端的偏移量
value为滑块位置对应的数据值
formatPercent Func 百分比格式化方法
percentStyle Style 百分比样式
style Style 容器样式
sliderStyle Style 滑动条组件样式
onlyScale Bool 是否仅显示滑动条,不需要显示百分比
linesNum Number 刻度条个数 10
lineWidth Number 刻度线宽度
layout String 百分比相对滑动条的位置
当 direction 为 坚直方向时,其值可为 left 和 right,默认为 right
当 direction 为 水平方向时,其值可为 top 和 bottom,默认为 top
取值 ‘left’, ‘right’, ‘top’, ‘bottom’

使用示例

import React, { Component } from 'react';
import { View } from 'react-native';
import { ScaleSlider } from '@tuya/tuya-panel-lamp-sdk';
 
export default class Scene extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <ScaleSlider value={800} onMove={v => console.log('onMove', v)} />
      </View>
    );
  }
}