slider

解释：滑动选择器

属性说明：

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长，取值必须大于 0，并且可被 (max - min) 整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
backgroundColorColor#cccccc背景条的颜色
block-sizeNumber24滑块的大小，取值范围为 12 - 28
block-colorColor#ffffff滑块的颜色
activeColorColor#3c76ff已选择的颜色
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle-完成一次拖动后触发的事件，event.detail = {value: value}
bindchangingEventHandle-拖动过程中触发的事件，event.detail = {value: value}

示例：在开发者工具中预览效果

  1. <!--- slider.swan --->
    <p>default</p>
    <slider></slider>
    <br/>
    <slider value="50"></slider>
    <br/>

    <p>disabled</p>
    <slider disabled></slider>
    <slider disabled value="50" step="20" showValue></slider>
    <br/>

    <p>swan-slider-demo</p>
    <slider showValue></slider>
    <br/>

    <slider showValue max="2000" min="200" step="50"></slider>
    <br/>
    <p>value=100 小于 min: 200</p>
    <slider showValue max="2000" min="200" step="50" value="100"></slider>
    <p>value=3000 大于于 max: 2000</p>
    <slider showValue max="2000" min="200" step="50" value="3000"></slider>
    <br/>


    <p>step: 20</p>
    <slider step="20" showValue></slider>
    <br/>
    <slider step="20" showValue value="20"></slider>

    <p>color</p>
    <slider step="20" showValue value="20" backgroundColor="red"></slider>
    <slider step="20" showValue value="20" backgroundColor="red" activeColor="green"></slider>

    <p>event</p>
    <slider bind:change="sliderChange" bind:changing="sliderChanging" showValue></slider>

  1. // slider.js
    Page({
        data: {
            zztest: 'hzz780'
        },
        sliderChange: e ={
            console.log('sliderChange', e, e.detail);
        },
        sliderChanging: e ={
            console.log('sliderChanging', e, e.detail);
        }
    });