Slider

滑动选择器。

mpvue 对小程序原生组件 slider 的各个属性完全支持，还是有两个坑要说下（其实大部分坑都是由于小程序原生组件的绑定事件在 mpvue 框架中写法不同造成的）：

  1. slider的属性bindchange和bindchanging 在mpvue框架中的写法为: @change和@changing

  2. 类型为事件的属性在完成触发事件后，取值的方式为：event.mp.detail = {value: value}

  1. <template>
  2.   <div class="page">
  3.     <div class="page__bd page__bd_spacing">
  4.       <div class="page__desc">设置step</div>
  5.       <slider @change="sliderChange1" step="5" />
  6.       <div class="page__desc">显示当前value</div>
  7.       <slider show-value value=50 @change="sliderChange2" />
  8.       <div class="page__desc">设置最小/最大值</div>
  9.       <slider show-value @change="sliderChange3" min="50" max="200" />
  10.     </div>
  11.   </div>
  12.   </div>
  13. </template>
  15. <script>
  16. import base64 from '../../../static/images/base64';
  17. export default {
  18.   data() {
  19.     return {
  20.       icon: '',
  21.     }
  22.   },
  23.   mounted() {
  24.     this.icon = base64.icon20;
  25.   },
  26.   methods: {
  27.     sliderChange1(e) {
  28.       console.log('slider1 发生 change 事件，携带值为' + e.mp.detail.value);
  29.     },
  30.     sliderChange2(e) {
  31.       console.log('slider2 发生 change 事件，携带值为' + e.mp.detail.value)
  32.     },
  33.     sliderChange3(e) {
  34.       console.log('slider3 发生 change 事件，携带值为' + e.mp.detail.value)
  35.     }
  36.   }
  38. }
  39. </script>
  41. <style>
  42. slider {
  43.   margin-bottom: 60px;
  44. }
  45. </style>

效果 slider01

动态修改滑块最大值与最小值

slider02