slider

概述

滑动选择器。

使用限制

子组件

不支持

属性

除了支持 通用属性以外，还支持如下属性。

样式

支持active伪类。支持除max-width、max-height外所有通用样式，还支持如下样式。

事件

不支持swipe事件。低于1040版本不支持click事件。除了支持 通用事件 以外，还支持如下事件。

示例代码

<template>
    <div class="container">
        <div class="page-title-wrap">
            <text class="page-title">{{componentName}}</text>
        </div>
        <div class="item-container">
            <text class="item-title">显示当前value</text>
            <div class="item-content">
                <slider class="slider" style="color:#FFB6C1" value=50 onchange="getValue('currentValue1')"></slider>
                <text class="label">{{currentValue1}}</text>
            </div>
        </div>
        <div class="item-container">
            <text class="item-title">设置step: {{step}}</text>
            <div class="item-content">
                <slider class="slider" value=50 step="{{step}}" onchange="getValue('currentValue2')"></slider>
                <text class="label">{{currentValue2}}</text>
            </div>
        </div>
        <div class="item-container">
            <text class="item-title">设置最小值: 50; 最大值: 200</text>
            <div class="item-content">
                <slider class="slider" min="50" max="200" value=50 onchange="getValue('currentValue3')"></slider>
                <text class="label">{{currentValue3}}</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data: {
            componentName: 'slider',
            step: 10,
            currentValue1: 50,
            currentValue2: 50,
            currentValue3: 50,
        },
        getValue: function (name, e) {
            this[name] = e.progress
        }
    }
</script>
<style>
    .container {
        flex: 1;
        flex-direction: column;
    }
    .page-title-wrap {
        padding-top: 50px;
        padding-bottom: 80px;
        justify-content: center;
    }
    .page-title {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        padding-right: 40px;
        border-color: #bbbbbb;
        color: #bbbbbb;
        border-bottom-width: 2px;
    }
    .item-container {
        margin-top: 20px;
        margin-bottom: 30px;
        flex-direction: column;
    }
    .item-title {
        padding-left: 30px;
        padding-bottom: 30px;
        padding-top: 30px;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        color: #aaaaaa;
    }
    .item-content {
        background-color: #ffffff;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        padding-left: 30px;
        padding-right: 30px;
    }
    .slider {
        flex: 1;
        padding-left: 50px;
        padding-right: 200px;
        selected-color: #FF0000;
        block-color: #FFFF00;
    }
    .label {
        padding-left: 30px;
        padding-right: 30px;
    }
</style>

效果图如下：

版本更新说明