wxc-slider-bar

优质

小牛编辑

134浏览

2023-12-01

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

Weex 滑动选择组件

规则

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

Demo

使用方法

<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 详细可以查看这里

可配置参数

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]`	回传值

事件

滑动时候的值更新

@updateValue="updateValue"

滑动停止时候回传指

@wxcSliderBarTouchEnd="wxcSliderBarTouchEnd"