Slider

滑动选择器。

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

!> 1. slider的属性bindchangebindchangingmpvue框架中的写法为: @change@changing

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

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

效果
slider01

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

slider02