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

2020-08-28 15:42 更新

slider 滑动选择器

解释:滑动选择器

属性说明

属性名 类型 默认值 必填 说明

min

Number

0

最小值

max

Number

100

最大值

step

Number

1

步长,取值必须大于 0,并且可被 (max - min) 整除

disabled

Boolean

false

是否禁用

value

Number

0

当前取值

backgroundColor

Color

#cccccc

背景条的颜色

block-size

Number

24

滑块的大小,取值范围为 12 - 28

block-color

Color

#ffffff

滑块的颜色

activeColor

Color

#3c76ff

已选择的颜色

show-value

Boolean

false

是否显示当前 value

bindchange

EventHandle

完成一次拖动后触发的事件,event.detail = {value: value}

bindchanging

EventHandle

拖动过程中触发的事件,event.detail = {value: value}

示例 

在开发者工具中打开


代码示例 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>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号