nvue.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * 使用bindingx方案实现slider
  3. * 只能使用于nvue下
  4. */
  5. // 引入bindingx,此库类似于微信小程序wxs,目的是让js运行在视图层,减少视图层和逻辑层的通信折损
  6. const BindingX = uni.requireNativePlugin('bindingx')
  7. // nvue操作dom的库,用于获取dom的尺寸信息
  8. const dom = uni.requireNativePlugin('dom')
  9. // nvue中用于操作元素动画的库,类似于uni.animation,只不过uni.animation不能用于nvue
  10. const animation = uni.requireNativePlugin('animation')
  11. export default {
  12. data() {
  13. return {
  14. // 位移的偏移量
  15. x: 0,
  16. // 是否正在触摸过程中,用于标记动画类是否添加或移除
  17. touching: false,
  18. changeFromInside: false
  19. }
  20. },
  21. watch: {
  22. // 监听vlaue的变化,此变化可能是由于内部修改v-model的值,或者外部
  23. // 从服务端获取一个值后,赋值给slider的v-model而导致的
  24. value(n) {
  25. if (!this.changeFromInside) {
  26. this.initX()
  27. } else {
  28. this.changeFromInside = false
  29. }
  30. }
  31. },
  32. mounted() {
  33. this.init()
  34. },
  35. methods: {
  36. init() {
  37. // 更新滑块尺寸信息
  38. this.getSliderRect().then((size) => {
  39. this.sliderRect = size
  40. this.initX()
  41. })
  42. },
  43. // 获取节点信息
  44. // 获取slider尺寸
  45. getSliderRect() {
  46. // 获取滑块条的尺寸信息
  47. // 通过nvue的dom模块,查询节点信息
  48. return new Promise((resolve) => {
  49. this.$nextTick(() => {
  50. dom.getComponentRect(this.$refs.slider, (res) => {
  51. resolve(res.size)
  52. })
  53. })
  54. })
  55. },
  56. // 初始化按钮位置
  57. initButtonStyle({
  58. barStyle,
  59. buttonWrapperStyle
  60. }) {
  61. this.barStyle = barStyle
  62. this.buttonWrapperStyle = buttonWrapperStyle
  63. },
  64. emitEvent(event, value) {
  65. this.$emit(event, value || this.value)
  66. },
  67. // 滑动开始
  68. async onTouchStart(e) {
  69. // if (this.disabled) return
  70. // // 阻止页面滚动,可以保证在滑动过程中,不让页面可以上下滚动,造成不好的体验
  71. // e.stopPropagation && e.stopPropagation()
  72. // e.preventDefault && e.preventDefault()
  73. // // 更新滑块的尺寸信息
  74. // this.sliderRect = await this.getSliderRect()
  75. // // 标记滑动过程中触摸点的信息
  76. // this.touchStart(e)
  77. // this.startValue = this.format(this.value)
  78. // this.dragStatus = 'start'
  79. // 标记滑动过程中触摸点的信息
  80. // this.touchStart(e)
  81. },
  82. // 开始滑动
  83. onTouchMove(e) {
  84. // if (this.disabled) return;
  85. // if (this.dragStatus === 'start') {
  86. // this.$emit('drag-start')
  87. // }
  88. // // 标记当前滑动过程中的触点信息,此方法在touch mixin中
  89. // this.touchMove(e)
  90. // this.dragStatus = 'draging'
  91. // const {
  92. // width: sliderWidth
  93. // } = this.sliderRect
  94. // const diff = (this.deltaX / sliderWidth) * this.getRange()
  95. // this.newValue = this.startValue + diff
  96. // this.updateValue(this.newValue, false, true)
  97. // 获取元素ref
  98. // const button = this.$refs['nvue-button'].ref
  99. // const gap = this.$refs['nvue-gap'].ref
  100. // animation.transition(gap, {
  101. // styles: {
  102. // width: `${this.startX + this.deltaX}px`
  103. // }
  104. // })
  105. // // console.log(this.startX + this.deltaX);
  106. // animation.transition(button, {
  107. // styles: {
  108. // transform: `translateX(${this.startX + this.deltaX}px)`
  109. // }
  110. // })
  111. // this.barStyle = {
  112. // width: `${this.startX + this.deltaX}px`
  113. // }
  114. const {
  115. x
  116. } = this.getTouchPoint(e)
  117. this.buttonWrapperStyle = {
  118. transform: `translateX(${x}px)`
  119. }
  120. // this.buttonWrapperStyle = {
  121. // transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
  122. // }
  123. },
  124. // onTouchEnd() {
  125. // if (this.disabled) return;
  126. // if (this.dragStatus === 'draging') {
  127. // this.updateValue(this.newValue, true)
  128. // this.$emit('drag-end');
  129. // }
  130. // },
  131. updateValue(value, end, drag) {
  132. value = this.format(value)
  133. const {
  134. width: sliderWidth
  135. } = this.sliderRect
  136. const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
  137. this.value = value
  138. this.barStyle = {
  139. width: `${width}px`
  140. }
  141. // console.log('width', width);
  142. if (drag) {
  143. this.$emit('drag', {
  144. value
  145. })
  146. }
  147. if (end) {
  148. this.$emit('change', value)
  149. }
  150. if ((drag || end)) {
  151. this.changeFromInside = true
  152. this.$emit('update', value)
  153. }
  154. },
  155. // 从value的变化,倒推得出x的值该为多少
  156. initX() {
  157. const {
  158. left,
  159. width
  160. } = this.sliderRect
  161. // 得出x的初始偏移值,之所以需要这么做,是因为在bindingX中,触摸滑动时,只能的值本次移动的偏移值
  162. // 而无法的值准确的前后移动的两个点的坐标值,weex纯粹为阿里巴巴的KPI(部门业绩考核)产物,也就这样了
  163. this.x = this.value / 100 * width
  164. // 设置移动的值
  165. const barStyle = {
  166. width: `${this.x}px`
  167. }
  168. // 按钮的初始值
  169. const buttonWrapperStyle = {
  170. transform: `translateX(${this.x - this.blockHeight / 2}px)`
  171. }
  172. this.initButtonStyle({
  173. barStyle,
  174. buttonWrapperStyle
  175. })
  176. },
  177. // 移动点占总长度的百分比,此处需要先除以step,是为了保证step大于1时,比如10,那么在滑动11,12px这样的
  178. // 距离时,实际上滑块是不会滑动的,到了16,17px,经过四舍五入后,就变成了20px,进行了下一个跳变
  179. format(value) {
  180. return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
  181. },
  182. getRange() {
  183. const {
  184. max,
  185. min
  186. } = this
  187. return max - min
  188. }
  189. }
  190. }