全部产品

slider 滑动选择器

滑动选择器。

扫码体验

image.png

示例代码

<!-- API-DEMO page/component/slider/slider.axml -->
<view class="page">
  <view class="page-description">滑块</view>
  <view class="page-section">
    <view class="page-section-title">设置step</view>
    <view class="page-section-demo">
      <slider value="5" onChange="slider2change" step="5"/>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">设置最小/最大值范围</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value/>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">自定义样式</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value
      backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
    </view>
  </view>
</view>
// API-DEMO page/component/slider/slider.js
const pageData = {};
for (let i = 1; i < 5; ++i) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + index + '发生 change 事件,携带值为', e.detail.value);
    };
  })(i);
}
Page(pageData);

属性

属性类型默认值描述
nameString-组件名字,用于表单提交获取数据
minNumber0最小值
maxNumber100最大值
stepNumber1步长,值必须大于 0,并可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前 value
active-colorString#108ee9已选择的颜色,同 CSS 色值
background-colorString#ddd背景条颜色,同 CSS 色值
track-sizeNumber4轨道线条高度
handle-sizeNumber22滑块大小
handle-colorString#fff滑块填充色,同 CSS 色值
onChangeEventHandle-完成一次拖动后触发,event.detail = {value: value}
onChangingEventHandle-拖动过程中触发的事件,event.detail = {value: value}