wxc-slider-bar

这个富交互体验组件依赖于 Weex BindingX 特性，使用前请确定你的App 是否安装

Weex 滑动选择组件

规则

  • 用于选择线性取值范围中某个具体的值（整数），或者选取一个取值范围

Demo

wxc-slider-bar 滑动输入条 - 图1 wxc-slider-bar 滑动输入条 - 图2

使用方法

  1. <template>
    2.   <wxc-slider-bar v-bind="sliderBarCfg"></wxc-slider-bar>
    3. </template>
    4. <script>
    5.   import { WxcSliderBar } from 'weex-ui';
    6.   export default {
    7.       components: { WxcSliderBar },
    8.       data: () => ({
    9.       sliderBarCfg: {
    10.         length: 400,
    11.         range: false,
    12.         min: 0,
    13.         max: 100,
    14.         value: 50,
    15.         defaultValue: 50,
    16.         disabled: false
    17.       }
    18.       });
    19.   }
    20. </script>Click to copy

更多 Demo 详细可以查看 这里

可配置参数

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 禁用颜色
### 事件
* 滑动时候的值更新
@updateValue="updateValue"Click to copy

Please feel free to use and contribute to the development.

原文: https://alibaba.github.io/weex-ui/#/cn/packages/wxc-slider-bar/