index.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. Component({
  2. options: {
  3. multipleSlots: true,
  4. addGlobalClass: true
  5. },
  6. properties: {
  7. list: {
  8. type: Array
  9. },
  10. active: {
  11. type: Number,
  12. value: 0
  13. },
  14. onChenge: {
  15. type: Function
  16. },
  17. mode: {
  18. type: String,
  19. value: "default" //buts
  20. },
  21. safety: {
  22. type: Function,
  23. value: true
  24. }
  25. },
  26. lifetimes: {
  27. attached() {
  28. getApp().globalData.Language.getLanguagePackage(this)
  29. }
  30. },
  31. data: {
  32. scrollLeft: 0,
  33. startPoint: 0, //记录滑动的初始位置
  34. slipFlag: false, //定义 滑动事件 节流阀, 防止一次滑动触发多次滑动事件
  35. },
  36. methods: {
  37. tabsChenge(e) {
  38. const {
  39. index
  40. } = e.currentTarget.dataset;
  41. if (this.data.active == index) return;
  42. this.setData({
  43. active: index
  44. });
  45. this.setActive();
  46. },
  47. setActive() {
  48. const that = this,
  49. active = this.data.active,
  50. query = wx.createSelectorQuery().in(this)
  51. query.select('#active' + active).boundingClientRect(function (res) {
  52. let index = res.dataset.index,
  53. scrollLeft = res.left;
  54. if (index >= 6) scrollLeft += ((index - 4) * res.width);
  55. if (that.data.scrollLeft > scrollLeft && index >= 4) scrollLeft += (2 * res.width)
  56. that.setData({
  57. scrollLeft
  58. })
  59. }).exec();
  60. this.triggerEvent("onChenge", active)
  61. },
  62. myTouchStart(e) {
  63. return;
  64. this.setData({
  65. slipFlag: true,
  66. startPoint: e.touches[0]
  67. })
  68. },
  69. myTouchMove(e) {
  70. return;
  71. let active = this.data.active;
  72. if (((this.data.startPoint.clientX - e.touches[e.touches.length - 1].clientX) > 80) && this.data.slipFlag) {
  73. if (active != this.data.list.length - 1) active++;
  74. this.setData({
  75. slipFlag: false,
  76. active
  77. })
  78. } else if (((this.data.startPoint.clientX - e.touches[e.touches.length - 1].clientX) < -80) && this.data.slipFlag) {
  79. if (active != 0) active--;
  80. this.setData({
  81. slipFlag: false,
  82. active
  83. })
  84. }
  85. this.setActive();
  86. },
  87. }
  88. })