slider（滑动选择器）组件，俗称滑杆
是一种通过拖动实现数值选择的组件

可用来控制音量大小、播放进度、缩放比例等

微信小程序的slider组件通常有丰富的属性可以设置，如表3.26所示

slider组件的属性

image.png

  1. index.wxml
  2. ---------------
  3. <view>
  4.   <text >缩放比例为： {{value}}%</text>
  5.   <view >
  6.     <slider bindchange="sliderChange"
  7.     min="10"
  8.     max="100"
  9.     step="2"
  10.     show-value
  11.     activeColor="red"
  12.     backgroundColor="green"/>
  13.   </view>
  14. </view>
  15. ------------------------------------------------------
  16. index.js
  17. --------------
  18. Page({
  19.   data:{
  20.     value:0
  21.   },
  22.     sliderChange: function(e){
  23.     console.log('slider发生 change 事件，携带值为', e.detail.value)
  24.     this.setData({
  25.       value: e.detail.value
  26.     })
  27.   }
  28. })

在示例3-24中，设置slider组件的最小取值为10，最大取值为100，步长为2，也就是每次滑动会增加或较少2，背景颜色为绿色，滑过部分颜色为红色，并且在滑杆最后显示当前的值