weex-ui
Version:
A rich interaction, lightweight, high performance UI library based on Weex
73 lines (58 loc) • 2.47 kB
Markdown
# wxc-slider-bar
!> 这个富交互体验组件依赖于 Weex [BindingX](https://alibaba.github.io/bindingx/) 特性，使用前请确定你的App [是否安装](https://github.com/alibaba/bindingx#installation)
> Weex 滑动选择组件
### 规则
- 用于选择线性取值范围中某个具体的值（整数），或者选取一个取值范围
## [Demo](https://h5.m.taobao.com/trip/wx-detection-demo/slider-bar/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwx-detection-demo%2Fslider-bar%2Findex.weex.js)
<img src="https://gw.alipayobjects.com/zos/rmsportal/KAGxLOahnabmMTggilTC.gif" width="240px"/>
<img src="https://img.alicdn.com/tfs/TB1kauscAyWBuNjy0FpXXassXXa-200-200.png" width="160px"/>
## 使用方法
```vue
<template>
<wxc-slider-bar v-bind="sliderBarCfg"></wxc-slider-bar>
</template>
<script>
import { WxcSliderBar } from 'weex-ui';
export default {
components: { WxcSliderBar },
data: () => ({
sliderBarCfg: {
length: 400,
range: false,
min: 0,
max: 100,
value: 50,
defaultValue: 50,
disabled: false
}
});
}
</script>
```
更多 Demo 详细可以查看 [这里](https://github.com/apache/incubator-weex-ui/blob/master/example/slider-bar/index.vue)
### 可配置参数
| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| length | `Number` |`N`| `500` | 滑条长度 |
| height | `Number` |`N`| `4` | 滑条高度 |
| range | `Boolean` |`N`| `false` | 是否选择范围 |
| min | `Number` |`N`| `0` | 滑条最小值 |
| max | `Number` |`N`| `100` | 滑条最大值 |
| minDiff | `Number` |`N`| `5` | 选择范围时最小差值（用于避免按钮重合） |
| value | `[Number, Array]` |`N`| `0` | 设置当前取值|
| defaultValue | `[Number, Array]` |`N`| `0` | 设置初始取值|
| disabled | `Boolean` |`N`| `false` | 是否禁用 |
| invalidColor | `String` |`N`| `#E0E0E0`| 无效颜色 |
| validColor | `String` |`N`| `#EE9900`| 有效颜色 |
| disabledColor| `String` |`N`| `#AAA` | 禁用颜色 |
| selectRange | `Array` |`N`| `[0, 0]` | 回传值 |
| blockColor | `String` |`N`| `#FFFFFF` |滑块颜色|
### 事件
- 滑动时候的值更新
```
@updateValue="updateValue"
```
- 滑动停止时候回传指
```
@wxcSliderBarTouchEnd="wxcSliderBarTouchEnd"
```