小程序模板网

微信小程序slider应用,可加减的slider控制

页面结构

 

  1. <view class="control-w ">
  2. <block wx:for="{{controls}}" wx:key="id" wx:for-item="v">
  3. <view class="slide-item">
  4. <view class="itemName">{{v.name}}</view>
  5. <view class="slidewrap">
  6. <text class="s-con" data-id="{{v.id}}" bindtap="minusCount">-</text>
  7. <slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index<3}}" />
  8. <slider class="slide" bindchange="sliderchange" step="10" value="{{v.value}}" data-id="{{v.id}}" max="{{v.max}}" min="0" wx:if="{{index==3}}" />
  9. <text class="s-con" data-id="{{v.id}}" data-max="{{v.max}}" bindtap="addCount">+</text>
  10. </view>
  11. </view>
  12. </block>
  13. </view>
 

js结构

 

  1. Page({
  2. data: {
  3. controls: [
  4. {
  5. id: 1,
  6. name: '功能一',
  7. value: 30,
  8. max: 60
  9. },
  10. {
  11. id: 2,
  12. name: '功能二',
  13. value: 30,
  14. max: 60
  15. },
  16. {
  17. id: 3,
  18. name: '功能三',
  19. value: 30,
  20. max: 60
  21. },
  22. {
  23. id: 4,
  24. name: '功能四',
  25. value: 50,
  26. max: 100
  27. }
  28. ]
  29. },
  30.  
  31. // 控制加
  32. addCount: function (event) {
  33. let data = event.currentTarget.dataset
  34. let controls = this.data.controls
  35. let control = controls.find(function (v) {
  36. return v.id == data.id
  37. })
  38. let control1 = controls.find(function (v) {
  39. return v.max == data.max
  40. })
  41.   
  42. if (control.value > control1.max)
  43. return
  44. control.value += 10;
  45. this.setData({
  46. 'controls': controls
  47. })
  48. },
  49. // 控制减
  50. minusCount: function (event) {
  51. let data = event.currentTarget.dataset
  52. let controls = this.data.controls
  53. let control = controls.find(function (v) {
  54. return v.id == data.id
  55. })
  56. if (control.value <= 0)
  57. return
  58. control.value -= 10;
  59. this.setData({
  60. 'controls': controls
  61. })
  62. },
  63. //拖动
  64. sliderchange: function (e) {
  65. let data = e.currentTarget.dataset
  66. let controls = this.data.controls
  67. let control = controls.find(function (v) {
  68. return v.id == data.id
  69. })
  70. this.setData({
  71. 'controls': controls
  72. })
  73.  
  74. }
  75. })

页面样式 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23536.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询