后浪云百度小程序教程：slider 滑动选择器

2022-6-18

slider 滑动选择器
- 属性说明
- 示例
  - 代码示例 1：默认样式
  - 代码示例 2：显示当前取值
  - 代码示例 3：自定义最大 / 最小值
  - 代码示例 4：自定义步长
  - 代码示例 5：自定义样式

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：默认样式

SWAN
JS

 
 
 
  
  
  <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>

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

SWAN

 
 
 
  
  
  <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：自定义最大 / 最小值

SWAN

 
 
 
  
  
  <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：自定义步长

SWAN

 
 
 
  
  
  <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：自定义样式

SWAN

 
 
 
  
  
  <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>

作者：后浪云

链接：https://www.idc.net/help/186121/

文章版权归作者所有，未经允许请勿转载。

THE END