目录

slider

滑动选择器。

起始版本： 1.0.0

属性：

名称 类型 默认值 必填 描述
min number 0 否 最小值。
max number 100 否 最大值。
step number 1 否 步长，取值必须大于0，并且可被(max-min)整除。
disabled boolean false 否 是否禁用。
value number 0 否 当前取值。
activeColor color #0A59F7 否 已选择的颜色。
backgroundColor color rgba(0, 0, 0, 0.098) 否 背景条的颜色。
block-size number 16 否 滑块的大小，取值范围为：12-28。
block-color color #ffffff 否 滑块的颜色。
show-value boolean false 否 是否显示当前value。
bindchange eventhandle - 否 完成一次拖动后触发的事件，event.detail = {value}。
bindchanging eventhandle - 否 拖动过程中触发的事件，event.detail = {value}。

示例：

hxml文件：

<view class="page-body">
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置step：5</view>
    <view class="body-view">
      <slider value="60" bindchange="slider2change" step="5" show-value />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">显示当前value</view>
    <view class="body-view">
      <slider value="50" bindchange="slider3change" show-value />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">不显示当前value</view>
    <view class="body-view">
      <slider value="50" bindchange="slider4change" />
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置最小50/最大值200</view>
    <view class="body-view">
      <slider
        value="100"
        bindchange="slider5change"
        min="50"
        max="200"
        show-value="{{showValue}}"/>
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">设置颜色</view>
    <view class="body-view">
      <slider
        value="30"
        bindchange="slider6change"
        activeColor="#de01fc"
        backgroundColor="gray"
        min="0"
        max="100"
        show-value/>
    </view>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">滑块设置</view>
    <view class="body-view">
      <slider
        value="0"
        bindchange="slider7change"
        block-color="orange"
        block-size="18"
        min="0"
        max="100"
        show-value/>
    </view>
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">滑块大小</view>
  <view class="body-view">
    <slider block-size="{{20}}" />
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">滑块颜色</view>
  <view class="body-view">
    <slider block-color="#FF0000" />
  </view>
</view>
<view class="page-section page-section-gap">
  <view class="page-section-title">动态设置</view>
  <view class="body-view">
    <slider
      value="{{currentValue}}"
      step="{{setStep}}"
      bindchange="sliderchange"
      bindchanging="bindchanging"
      activeColor="{{setActiveColor}}"
      backgroundColor="{{setBackgroundColor}}"
      min="0"
      max="100"
      show-value="{{isShowValue}}"
      block-size="{{setBlockSize}}"
      block-color="{{setBlockColor}}"/>
  </view>
</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
  >bindchange事件触发：{{currentValue}}</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
  >bindchanging事件触发：{{changingValue}}</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">显示当前 value</view>
  <view class="ascf-cell__ft">
    <switch checked="{{isShowValue}}" bindchange="changeShowValue" />
  </view>
</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">设置step=1或5</view>
  <view class="ascf-cell__ft">
    <switch checked="{{isSetStep}}" bindchange="changeStep" />
  </view>
</view>
<view class="ascf-cell ascf-cell_switch">
  <view class="ascf-cell__bd">设置已选择的颜色</view>
  <view class="-cell__ft">
    <switch checked="{{isSetActiveColor}}" bindchange="changeActiveColor" />
  </view>
</view>

js文件：

const pageData={
  data: {
    isShowValue: true,
    currentValue: 30,
    changingValue: '',
    setStep: 1,
    isSetStep: false,
    isSetActiveColor: false,
    isSetBackgroundColor: false,
    setActiveColor: '#1aad19',
    setBackgroundColor: '#e9e9e9',
    setBlockSize: '28',
    isSetBlockSize: false,
    setBlockColor: '#ffffff',
    isSetBlockColor: false,
    showValue: true,
  },
  sliderchange(e) {
    this.setData({
      currentValue: e.detail.value,
    });
  },
  bindchanging(e) {
    this.setData({
      changingValue: e.detail.value,
    });
  },
  changeShowValue() {
    this.setData({
      isShowValue: !this.data.isShowValue,
    });
  },
  changeStep() {
    this.setData({
      setStep: !this.data.isSetStep ? 5 : 1,
      isSetStep: !this.data.isSetStep,
    });
  },
  changeActiveColor() {
    this.setData({
      setActiveColor: !this.data.isSetActiveColor ? '#de01fc' : '#1aad19',
      isSetActiveColor: !this.data.isSetActiveColor,
    });
  },
  changeBackgroundColor() {
    this.setData({
      setBackgroundColor: !this.data.isSetBackgroundColor ? 'gray' : '#e9e9e9',
      isSetBackgroundColor: !this.data.isSetBackgroundColor,
    });
  },
  changeBlockSize() {
    this.setData({
      setBlockSize: !this.data.isSetBlockSize ? '10' : '28',
      isSetBlockSize: !this.data.isSetBlockSize,
    });
  },
  changeBlockColor() {
    this.setData({
      setBlockColor: !this.data.isSetBlockColor
        ? 'rgb(238, 3, 247)'
        : '#ffffff',
      isSetBlockColor: !this.data.isSetBlockColor,
    });
  },
};
for (var i = 1; i < 8; ++i) {
  (function(index) {
    pageData[`slider${index}change`] = function(e) {
      console.info(`slider${index}发生change事件，携带值为`, e.detail.value);
    };
  })(i);
}
Page(pageData);