×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：slider 滑动选择器

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}

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

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

 
 
 
      
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  默认样式
    4.   
  
  
  4.  
    5.   
  
  
  5.  class="slider"
    6.   
  
  
  6.  min="0"
    7.   
  
  
  7.  max="1500"
    8.   
  
  
  8.  value="200"
    9.   
  
  
  9.  step="30"
    10.   
  
  
  10.  bind:change="sliderChange"
    11.   
  
  
  11.  bind:changing="sliderChanging"
    12.   
  
  
  12.  disabled="false">
    13.   
  
  
  13.  
    14.   
  
  
  14.  
    15.   
  
  
    16.

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

 
 
 
      
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  显示当前取值
    5.   
  
  
  5.  show-value
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  class="slider"
    9.   
  
  
  9.  min="0"
    10.   
  
  
  10.  max="200"
    11.   
  
  
  11.  value="30"
    12.   
  
  
  12.  show-value
    13.   
  
  
  13.  step="30"
    14.   
  
  
  14.  bind:change="sliderChange"
    15.   
  
  
  15.  disabled="false">
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.   
  
  
    19.

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

 
 
 
      
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  自定义最大/最小值
    5.   
  
  
  5.  min="200" max="1500"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  class="slider"
    9.   
  
  
  9.  min="200"
    10.   
  
  
  10.  max="1500"
    11.   
  
  
  11.  value="400"
    12.   
  
  
  12.  show-value step="30"
    13.   
  
  
  13.  bind:change="sliderChange"
    14.   
  
  
  14.  disabled="false">
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
    18.

代码示例 4：自定义步长

 
 
 
      
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  自定义步长
    5.   
  
  
  5.  step="30"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  class="slider"
    9.   
  
  
  9.  min="0"
    10.   
  
  
  10.  max="1500"
    11.   
  
  
  11.  value="200"
    12.   
  
  
  12.  step="30"
    13.   
  
  
  13.  bind:change="sliderChange"
    14.   
  
  
  14.  disabled="false">
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
    18.

代码示例 5：自定义样式

 
 
 
      
  
  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  自定义样式
    5.   
  
  
  5.  block-size="16" block-color="#3388FF"
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  class="slider"
    9.   
  
  
  9.  min="0"
    10.   
  
  
  10.  max="1500"
    11.   
  
  
  11.  value="200"
    12.   
  
  
  12.  step="30"
    13.   
  
  
  13.  block-size="16"
    14.   
  
  
  14.  block-color="#3388FF"
    15.   
  
  
  15.  activeColor="#3c76ff"
    16.   
  
  
  16.  backgroundColor="#cccccc"
    17.   
  
  
  17.  disabled="false">
    18.   
  
  
  18.  
    19.   
  
  
  19.  
    20.   
  
  
    21.

本文名称：创新互联百度小程序教程：slider 滑动选择器
网页地址：http://cdbrznjsb.com/article/cdspese.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务