百度智能小程序 滑动选择器

slider 滑动选择器

解释：滑动选择器

属性说明

示例 

在开发者工具中打开

代码示例 1 - 默认样式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默认样式</view>
        <slider 
            class="slider" 
            min="0" 
            max="1500" 
            value="200" 
            step="30" 
            bind:change="sliderChange"
            bind:changing="sliderChanging"
            disabled="false">
        </slider>
    </view>
</view>

Page({
    sliderChange(e) {
        console.log('sliderChange', e.detail);
    },
    sliderChanging(e) {
        console.log('sliderChanging', e.detail);
    }
});

代码示例 2 - 显示当前取值

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>显示当前取值</view>
            <view>show-value</view>
        </view>
        <slider 
            class="slider" 
            min="0" 
            max="200" 
            value="30" 
            show-value 
            step="30" 
            bind:change="sliderChange"
            disabled="false">
        </slider>
    </view>
</view>

代码示例 3 - 自定义最大/最小值

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义最大/最小值</view>
            <view>min="200" max="1500"</view>
        </view>
        <slider 
            class="slider" 
            min="200" 
            max="1500" 
            value="400"  
            show-value step="30"
            bind:change="sliderChange"
            disabled="false">
        </slider>
    </view>
</view>

代码示例 4 - 自定义步长

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义步长</view>
            <view>step="30"</view>
        </view>
        <slider 
            class="slider" 
            min="0" 
            max="1500" 
            value="200" 
            step="30" 
            bind:change="sliderChange"
            disabled="false">
        </slider>
    </view>
</view>

代码示例 5 - 自定义样式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义样式</view>
            <view>block-size="16"  block-color="#3388FF"</view>
        </view>
        <slider 
            class="slider"  
            min="0" 
            max="1500" 
            value="200" 
            step="30" 
            block-size="16"  
            block-color="#3388FF"
            activeColor="#3c76ff"
            backgroundColor="#cccccc"
            disabled="false">
        </slider>
    </view>
</view>