酷炫直播运营系统小程序版本

render.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. const MIN_DISTANCE = 10;
  2. export default {
  3. showWatch(newVal, oldVal, ownerInstance, instance,self) {
  4. var state = self.state
  5. var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
  6. if(!el) return
  7. this.getDom(instance, ownerInstance,self)
  8. if (newVal && newVal !== 'none') {
  9. this.openState(newVal, instance, ownerInstance,self)
  10. return
  11. }
  12. if (state.left) {
  13. this.openState('none', instance, ownerInstance,self)
  14. }
  15. this.resetTouchStatus(instance,self)
  16. },
  17. /**
  18. * 开始触摸操作
  19. * @param {Object} e
  20. * @param {Object} ins
  21. */
  22. touchstart(e, ownerInstance, self) {
  23. let instance = e.instance;
  24. let disabled = instance.getDataset().disabled
  25. let state = self.state;
  26. this.getDom(instance, ownerInstance, self)
  27. // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  28. disabled = this.getDisabledType(disabled)
  29. if (disabled) return
  30. // 开始触摸时移除动画类
  31. instance.requestAnimationFrame(function() {
  32. instance.removeClass('ani');
  33. ownerInstance.callMethod('closeSwipe');
  34. })
  35. // 记录上次的位置
  36. state.x = state.left || 0
  37. // 计算滑动开始位置
  38. this.stopTouchStart(e, ownerInstance, self)
  39. },
  40. /**
  41. * 开始滑动操作
  42. * @param {Object} e
  43. * @param {Object} ownerInstance
  44. */
  45. touchmove(e, ownerInstance, self) {
  46. let instance = e.instance;
  47. // 删除之后已经那不到实例了
  48. if(!instance) return;
  49. let disabled = instance.getDataset().disabled
  50. let state = self.state
  51. // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  52. disabled = this.getDisabledType(disabled)
  53. if (disabled) return
  54. // 是否可以滑动页面
  55. this.stopTouchMove(e, self);
  56. if (state.direction !== 'horizontal') {
  57. return;
  58. }
  59. if (e.preventDefault) {
  60. // 阻止页面滚动
  61. e.preventDefault()
  62. }
  63. let x = state.x + state.deltaX
  64. this.move(x, instance, ownerInstance, self)
  65. },
  66. /**
  67. * 结束触摸操作
  68. * @param {Object} e
  69. * @param {Object} ownerInstance
  70. */
  71. touchend(e, ownerInstance, self) {
  72. let instance = e.instance;
  73. let disabled = instance.getDataset().disabled
  74. let state = self.state
  75. // fix by mehaotian, TODO 兼容 app-vue 获取dataset为字符串 , h5 获取 为 undefined 的问题,待框架修复
  76. disabled = this.getDisabledType(disabled)
  77. if (disabled) return
  78. // 滑动过程中触摸结束,通过阙值判断是开启还是关闭
  79. // fixed by mehaotian 定时器解决点击按钮,touchend 触发比 click 事件时机早的问题 ,主要是 ios13
  80. this.moveDirection(state.left, instance, ownerInstance, self)
  81. },
  82. /**
  83. * 设置移动距离
  84. * @param {Object} value
  85. * @param {Object} instance
  86. * @param {Object} ownerInstance
  87. */
  88. move(value, instance, ownerInstance, self) {
  89. value = value || 0
  90. let state = self.state
  91. let leftWidth = state.leftWidth
  92. let rightWidth = state.rightWidth
  93. // 获取可滑动范围
  94. state.left = this.range(value, -rightWidth, leftWidth);
  95. instance.requestAnimationFrame(function() {
  96. instance.setStyle({
  97. transform: 'translateX(' + state.left + 'px)',
  98. '-webkit-transform': 'translateX(' + state.left + 'px)'
  99. })
  100. })
  101. },
  102. /**
  103. * 获取元素信息
  104. * @param {Object} instance
  105. * @param {Object} ownerInstance
  106. */
  107. getDom(instance, ownerInstance, self) {
  108. var state = self.state
  109. var $el = ownerInstance.$el || ownerInstance.$vm && ownerInstance.$vm.$el
  110. var leftDom = $el.querySelector('.button-group--left')
  111. var rightDom = $el.querySelector('.button-group--right')
  112. state.leftWidth = leftDom.offsetWidth || 0
  113. state.rightWidth = rightDom.offsetWidth || 0
  114. state.threshold = instance.getDataset().threshold
  115. },
  116. getDisabledType(value) {
  117. return (typeof(value) === 'string' ? JSON.parse(value) : value) || false;
  118. },
  119. /**
  120. * 获取范围
  121. * @param {Object} num
  122. * @param {Object} min
  123. * @param {Object} max
  124. */
  125. range(num, min, max) {
  126. return Math.min(Math.max(num, min), max);
  127. },
  128. /**
  129. * 移动方向判断
  130. * @param {Object} left
  131. * @param {Object} value
  132. * @param {Object} ownerInstance
  133. * @param {Object} ins
  134. */
  135. moveDirection(left, ins, ownerInstance, self) {
  136. var state = self.state
  137. var threshold = state.threshold
  138. var position = state.position
  139. var isopen = state.isopen || 'none'
  140. var leftWidth = state.leftWidth
  141. var rightWidth = state.rightWidth
  142. if (state.deltaX === 0) {
  143. this.openState('none', ins, ownerInstance, self)
  144. return
  145. }
  146. if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > 0 &&
  147. rightWidth +
  148. left < threshold)) {
  149. // right
  150. this.openState('right', ins, ownerInstance, self)
  151. } else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > 0 &&
  152. leftWidth - left < threshold)) {
  153. // left
  154. this.openState('left', ins, ownerInstance, self)
  155. } else {
  156. // default
  157. this.openState('none', ins, ownerInstance, self)
  158. }
  159. },
  160. /**
  161. * 开启状态
  162. * @param {Boolean} type
  163. * @param {Object} ins
  164. * @param {Object} ownerInstance
  165. */
  166. openState(type, ins, ownerInstance, self) {
  167. let state = self.state
  168. let leftWidth = state.leftWidth
  169. let rightWidth = state.rightWidth
  170. let left = ''
  171. state.isopen = state.isopen ? state.isopen : 'none'
  172. switch (type) {
  173. case "left":
  174. left = leftWidth
  175. break
  176. case "right":
  177. left = -rightWidth
  178. break
  179. default:
  180. left = 0
  181. }
  182. // && !state.throttle
  183. if (state.isopen !== type) {
  184. state.throttle = true
  185. ownerInstance.callMethod('change', {
  186. open: type
  187. })
  188. }
  189. state.isopen = type
  190. // 添加动画类
  191. ins.requestAnimationFrame(()=> {
  192. ins.addClass('ani');
  193. this.move(left, ins, ownerInstance, self)
  194. })
  195. },
  196. getDirection(x, y) {
  197. if (x > y && x > MIN_DISTANCE) {
  198. return 'horizontal';
  199. }
  200. if (y > x && y > MIN_DISTANCE) {
  201. return 'vertical';
  202. }
  203. return '';
  204. },
  205. /**
  206. * 重置滑动状态
  207. * @param {Object} event
  208. */
  209. resetTouchStatus(instance, self) {
  210. let state = self.state;
  211. state.direction = '';
  212. state.deltaX = 0;
  213. state.deltaY = 0;
  214. state.offsetX = 0;
  215. state.offsetY = 0;
  216. },
  217. /**
  218. * 设置滑动开始位置
  219. * @param {Object} event
  220. */
  221. stopTouchStart(event, ownerInstance, self) {
  222. let instance = event.instance;
  223. let state = self.state
  224. this.resetTouchStatus(instance, self);
  225. var touch = event.touches[0];
  226. state.startX = touch.clientX;
  227. state.startY = touch.clientY;
  228. },
  229. /**
  230. * 滑动中,是否禁止打开
  231. * @param {Object} event
  232. */
  233. stopTouchMove(event, self) {
  234. let instance = event.instance;
  235. let state = self.state;
  236. let touch = event.touches[0];
  237. state.deltaX = touch.clientX - state.startX;
  238. state.deltaY = touch.clientY - state.startY;
  239. state.offsetY = Math.abs(state.deltaY);
  240. state.offsetX = Math.abs(state.deltaX);
  241. state.direction = state.direction || this.getDirection(state.offsetX, state.offsetY);
  242. }
  243. }