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>

更多 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/