C端小程序
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

160 lignes
5.0 KiB

  1. /*
  2. * touch事件判断方式
  3. * https://github.com/madrobby/zepto/blob/master/src/touch.js#files
  4. */
  5. function swipeDirection(x1, x2, y1, y2) {
  6. return Math.abs(x1 - x2) >=
  7. Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
  8. }
  9. Component({
  10. externalClasses: ['i-class'],
  11. properties: {
  12. actions: {
  13. value: [],
  14. type: Array,
  15. observer : '_updateButtonSize'
  16. },
  17. unclosable : {
  18. value : false,
  19. type : Boolean
  20. },
  21. toggle : {
  22. value : false,
  23. type : Boolean,
  24. observer : 'closeButtonGroup'
  25. },
  26. operateWidth : {
  27. type : Number,
  28. value : 160
  29. }
  30. },
  31. options: {
  32. // 在组件定义时的选项中启用多slot支持
  33. multipleSlots: true
  34. },
  35. data : {
  36. //touch start position
  37. tStart : {
  38. pageX : 0,
  39. pageY : 0
  40. },
  41. //限制滑动距离
  42. limitMove : 0,
  43. //element move position
  44. position : {
  45. pageX : 0,
  46. pageY : 0
  47. }
  48. },
  49. methods : {
  50. //阻止事件冒泡
  51. loop(){},
  52. _updateButtonSize(){
  53. const actions = this.data.actions;
  54. if( actions.length > 0 ){
  55. const query = wx.createSelectorQuery().in(this);
  56. let limitMovePosition = 0;
  57. actions.forEach(item => {
  58. limitMovePosition += item.width || 0;
  59. });
  60. this.data.limitMove = limitMovePosition;
  61. /*
  62. * 动态获取每个传进值的按钮尺寸不能正确获取,在安卓上少了6px
  63. * 暂时实现需要在actions里面传递宽度
  64. * 需要后期调研
  65. */
  66. //query.selectAll('.i-swipeout-button-right-item').boundingClientRect((rects)=>{
  67. // if( rects ){
  68. // rects.forEach(item => {
  69. // limitMovePosition += item.width;
  70. // });
  71. // this.data.limitMove = limitMovePosition;
  72. // }
  73. // }).exec()
  74. }else{
  75. this.data.limitMove = this.data.operateWidth;
  76. }
  77. },
  78. handlerTouchstart(event){
  79. const touches = event.touches ? event.touches[0] : {};
  80. const tStart = this.data.tStart;
  81. if( touches ){
  82. for( let i in tStart ){
  83. if( touches[i] ){
  84. tStart[i] = touches[i];
  85. }
  86. }
  87. }
  88. },
  89. swipper(touches){
  90. const data = this.data;
  91. const start = data.tStart;
  92. const spacing = {
  93. pageX : touches.pageX - start.pageX,
  94. pageY : touches.pageY - start.pageY
  95. }
  96. if( data.limitMove < Math.abs( spacing.pageX ) ){
  97. spacing.pageX = -data.limitMove;
  98. }
  99. this.setData({
  100. 'position' : spacing
  101. })
  102. },
  103. handlerTouchmove(event){
  104. const start = this.data.tStart;
  105. const touches = event.touches ? event.touches[0] : {};
  106. if( touches ){
  107. const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
  108. if( direction === 'Left' ){
  109. this.swipper( touches );
  110. }
  111. }
  112. },
  113. handlerTouchend(event){
  114. const start = this.data.tStart;
  115. const touches = event.changedTouches ? event.changedTouches[0] : {};
  116. if( touches ){
  117. const direction = swipeDirection( start.pageX,touches.pageX,start.pageY,touches.pageY );
  118. const spacing = {
  119. pageX : touches.pageX - start.pageX,
  120. pageY : touches.pageY - start.pageY
  121. }
  122. if( Math.abs( spacing.pageX ) >= 40 && direction === "Left" ){
  123. spacing.pageX = spacing.pageX < 0 ? - this.data.limitMove : this.data.limitMove;
  124. }else{
  125. spacing.pageX = 0;
  126. }
  127. this.setData({
  128. 'position' : spacing
  129. })
  130. }
  131. },
  132. handlerButton(event){
  133. if( !this.data.unclosable ){
  134. this.closeButtonGroup();
  135. }
  136. const dataset = event.currentTarget.dataset;
  137. this.triggerEvent('change',{
  138. index : dataset.index
  139. })
  140. },
  141. closeButtonGroup(){
  142. this.setData({
  143. 'position' : {pageX : 0,pageY : 0}
  144. })
  145. },
  146. //控制自定义组件
  147. handlerParentButton(event){
  148. if( !this.data.unclosable ){
  149. this.closeButtonGroup();
  150. }
  151. }
  152. },
  153. ready(){
  154. this._updateButtonSize();
  155. }
  156. });