• slider

    slider

    滑动选择器。

    属性说明

    属性名类型默认值说明
    minNumber0最小值
    maxNumber100最大值
    stepNumber1步长，取值必须大于 0，并且可被(max - min)整除
    disabledBooleanfalse是否禁用
    valueNumber0当前取值
    activeColorColor各个平台不同，详见下滑块左侧已选择部分的线条颜色
    backgroundColorColor#e9e9e9滑块右侧背景条的颜色
    block-sizeNumber28滑块的大小，取值范围为 12 - 28
    block-colorColor#ffffff滑块的颜色
    show-valueBooleanfalse是否显示当前 value
    @changeEventHandle完成一次拖动后触发的事件，event.detail = {value: value}
    @changingEventHandle拖动过程中触发的事件，event.detail = {value: value}
    Tips

    • activeColor默认值在不同平台不一样，微信是绿色(#1aad19)，头条是红色，其他平台是蓝色
    • 如需要区间滑块，即一根横条上使用2个滑块选择一段范围，可见插件市场示例
    1. <template>
    2.     <view>
    3.         <view class="uni-padding-wrap uni-common-mt">
    4.             <view class="uni-title">设置step</view>
    5.             <view>
    6.                 <slider value="60" @change="sliderChange" step="5" />
    7.             </view>
    9.             <view class="uni-title">显示当前value</view>
    10.             <view>
    11.                 <slider value="50" @change="sliderChange" show-value />
    12.             </view>
    14.             <view class="uni-title">设置最小/最大值</view>
    15.             <view>
    16.                 <slider value="100" @change="sliderChange" min="50" max="200" show-value />
    17.             </view>
    19.             <view class="uni-title">不同颜色和大小的滑块</view>
    20.             <view>
    21.                 <slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
    22.             </view>
    23.         </view>
    24.     </view>
    25. </template>
    1. export default {
    2.     data() {
    3.         return {}
    4.     },
    5.     methods: {
    6.         sliderChange(e) {
    7.             console.log('value 发生变化：' + e.detail.value)
    8.         }
    9.     }
    10. }

    uniapp

    示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

    预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/slider/slider

    发现错误？想参与编辑？在 GitHub 上编辑此页面！