百度智能小程序 滑動(dòng)選擇器

slider 滑動(dòng)選擇器

解釋：滑動(dòng)選擇器

屬性說(shuō)明

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1 - 默認(rèn)樣式

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">默認(rèn)樣式</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 - 顯示當(dāng)前取值

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>顯示當(dāng)前取值</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 - 自定義步長(zhǎng)

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定義步長(zhǎng)</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>