# taro-slid-ruler

**Repository Path**: coder_trapall/taro-slid-ruler

## Basic Information

- **Project Name**: taro-slid-ruler
- **Description**: 使用react taro实现的滑动刻度尺子
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-01
- **Last Updated**: 2023-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 介绍
这是一个基于react和taro编写的滑动尺子组件。

<br>

## 预览（请使用手机预览）
http://106.55.183.185:80/taro-slid-ruler/#/

#### 兼容平台
* 微信小程序
* h5端

<br />

#### 使用示例

```tsx

export default class index extends Component<{}, _State> {
  state:_State = {
    value: 1,
    slidRuleController: new SlidRuleController({
      ruler: Array.from(Array(10000).keys()),
      onChange: (value)=>this.onChange(value),
      value: 1,
      precision: 1,
    })
  }

  onChange(detail: SlidRuleDetail){
    this.setState({
      value: detail.value
    })
  }

  render() {
    return (
      <View className='slid-ruler-demo'>
        <View className='show-box'>
          <View className='btn' onClick={()=>{
            this.state.slidRuleController.setValue(this.state.value - 1)
          }}>-</View>
          <View>value: {this.state.value}</View>
          <View className='btn' onClick={()=>{
            this.state.slidRuleController.setValue(this.state.value + 1)
          }}>+</View>
        </View>

        <SlidRule controller={this.state.slidRuleController}></SlidRule>
      </View>
    )
  }
}

```
<br/>

#### 属性列表
| 属性   | 默认值 |  类型  | 是否必传 |  备注 |
| :------: | :-----: | :-------: | :------:| :---- |
| rulur | [] | number[] | 是| 尺子中最大刻度的数组 |
| value | | number | 是 | ruler对应的值 |
| containerWidth | 可视宽度 | number | 否 | 容器宽度 |
| minScaleWidth | 20 | number | 否 | 最小刻度的宽度 |
| normalLineColor | #44CD8D | string | 否 | 标准线条颜色 |
| normalLineHeight | 50 | number | 否 | 标准线条高度 默认50；(单位：px) |
| scaleLineColor | #E4E4E4 | string | 否 | 正常刻度颜色 |
| precision | 1 | number | 否 | 最小精度 默认为1，也就是需要保留的小数位 | 
| onChange | | (value: SlidRuleDetail)=>void | 是 | value值变化的函数 |

<br/>

#### SlidRuleDetail类型
| 属性 | 类型 | 描述 |
| :----: | :----: | :----- |
| value | number | value值 |
| valueString | string | value值，对应的是可显示的string，例如：01，value对应的是1，而 valueString对应的是01。 |