用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:33

作者:千枫漓音,来自原文地址页面结构 {{v.name}} - + js结构Page({ data: { controls: }, // 控制加 addCount: func ...

作者:千枫漓音,来自

原文地址

页面结构

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

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. addCount: function (event) {
  32. let data = event.currentTarget.dataset
  33. let controls = this.data.controls
  34. let control = controls.find(function (v) {
  35. return v.id == data.id
  36. })
  37. let control1 = controls.find(function (v) {
  38. return v.max == data.max
  39. })
  40.   
  41. if (control.value > control1.max)
  42. return
  43. control.value += 10;
  44. this.setData({
  45. 'controls': controls
  46. })
  47. },
  48. // 控制减
  49. minusCount: function (event) {
  50. let data = event.currentTarget.dataset
  51. let controls = this.data.controls
  52. let control = controls.find(function (v) {
  53. return v.id == data.id
  54. })
  55. if (control.value <= 0)
  56. return
  57. control.value -= 10;
  58. this.setData({
  59. 'controls': controls
  60. })
  61. },
  62. //拖动
  63. sliderchange: function (e) {
  64. let data = e.currentTarget.dataset
  65. let controls = this.data.controls
  66. let control = controls.find(function (v) {
  67. return v.id == data.id
  68. })
  69. this.setData({
  70. 'controls': controls
  71. })
  72. }
  73. })

页面样式

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏