nvue - 副本.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  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. // bindingx的回调值,用于取消绑定
  15. panEvent: null,
  16. // 标记是否移动状态
  17. moving: false,
  18. // 位移的偏移量
  19. x: 0,
  20. // 是否正在触摸过程中,用于标记动画类是否添加或移除
  21. touching: false,
  22. changeFromInside: false
  23. }
  24. },
  25. watch: {
  26. // 监听vlaue的变化,此变化可能是由于内部修改v-model的值,或者外部
  27. // 从服务端获取一个值后,赋值给slider的v-model而导致的
  28. value(n) {
  29. if (!this.changeFromInside) {
  30. this.initX()
  31. } else {
  32. this.changeFromInside = false
  33. }
  34. }
  35. },
  36. mounted() {
  37. this.init()
  38. },
  39. methods: {
  40. init() {
  41. this.getSliderRect()
  42. },
  43. // 获取节点信息
  44. // 获取slider尺寸
  45. getSliderRect() {
  46. // 获取滑块条的尺寸信息
  47. // 通过nvue的dom模块,查询节点信息
  48. setTimeout(() => {
  49. dom.getComponentRect(this.$refs['slider'], res => {
  50. this.sliderRect = res.size
  51. this.initX()
  52. })
  53. }, 10)
  54. },
  55. // 初始化按钮位置
  56. initButtonStyle({
  57. barStyle,
  58. buttonWrapperStyle
  59. }) {
  60. this.barStyle = barStyle
  61. this.buttonWrapperStyle = buttonWrapperStyle
  62. },
  63. emitEvent(event, value) {
  64. this.$emit(event, value ? value : this.value)
  65. },
  66. formatStep(value) {
  67. // 移动点占总长度的百分比
  68. return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
  69. },
  70. // 滑动开始
  71. onTouchStart(e) {
  72. // 阻止页面滚动,可以保证在滑动过程中,不让页面可以上下滚动,造成不好的体验
  73. e.stopPropagation && e.stopPropagation()
  74. e.preventDefault && e.preventDefault()
  75. if (this.moving || this.disabled) {
  76. // 释放上一次的资源
  77. if (this.panEvent?.token != 0) {
  78. BindingX.unbind({
  79. token: this.panEvent.token,
  80. // pan为手势事件
  81. eventType: 'pan'
  82. })
  83. this.gesToken = 0
  84. }
  85. return
  86. }
  87. this.moving = true
  88. this.touching = true
  89. // 获取元素ref
  90. const button = this.$refs['nvue-button'].ref
  91. const gap = this.$refs['nvue-gap'].ref
  92. const {
  93. min,
  94. max,
  95. step
  96. } = this
  97. const {
  98. left,
  99. width
  100. } = this.sliderRect
  101. // 初始值为本次偏移量x,加上次停止滑动时的结束值
  102. let exporession = `(${this.x} + x)`
  103. // 将偏移的x值,转为总位移的百分比值,为了和min和max进行判断
  104. exporession = `(${exporession} / ${width}) * 100`
  105. if (step > 1) {
  106. // 如果step步进大于1,需要跳步,所以需要使用Math.round进行取整
  107. exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
  108. } else {
  109. // 当step=1时,无需跳步,充分利用bindingx性能,滑块实时跟随手势,达到丝滑的效果
  110. exporession = `max(${min}, min(${exporession}, ${max}))`
  111. }
  112. // 将百分比最后转化为对应的px值
  113. exporession = `${exporession} / 100 * ${width}`
  114. // 最大值不允许超过轨迹的宽度
  115. const {
  116. sliderWidth
  117. } = this.sliderRect
  118. exporession = `min(${sliderWidth}, ${exporession})`
  119. // 滑块点总是需要一个左偏移的值,为自身宽度的一半
  120. const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
  121. // 阿里为了KPI而开源的BindingX
  122. this.panEvent = BindingX.bind({
  123. anchor: button,
  124. eventType: 'pan',
  125. props: [{
  126. element: gap,
  127. // 绑定width属性,设置其宽度值
  128. property: 'width',
  129. expression
  130. }, {
  131. element: button,
  132. // 绑定width属性,设置其宽度值
  133. property: 'transform.translateX',
  134. expression: buttonExpression
  135. }]
  136. }, (e) => {
  137. if (e.state === 'end' || e.state === 'exit') {
  138. //
  139. this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
  140. // 根据偏移值,得出移动的百分比,进而修改双向绑定的v-model的值
  141. const value = (this.x / width) * 100
  142. const percent = this.formatStep(value)
  143. // 修改value值
  144. this.$emit('input', percent)
  145. // 标记下一次触发value的watch时,这个值的变化,是由内部改变的
  146. this.changeFromInside = true
  147. this.moving = false
  148. this.touching = false
  149. }
  150. })
  151. },
  152. // 从value的变化,倒推得出x的值该为多少
  153. initX() {
  154. const {
  155. left,
  156. width
  157. } = this.sliderRect
  158. // 得出x的初始偏移值,之所以需要这么做,是因为在bindingX中,触摸滑动时,只能的值本次移动的偏移值
  159. // 而无法的值准确的前后移动的两个点的坐标值,weex纯粹为阿里巴巴的KPI(部门业绩考核)产物,也就这样了
  160. this.x = this.value / 100 * width
  161. // 设置移动的值
  162. const barStyle = {
  163. width: this.x + 'px'
  164. }
  165. // 按钮的初始值
  166. const buttonWrapperStyle = {
  167. transform: `translateX(${this.x - this.blockHeight / 2}px)`
  168. }
  169. this.initButtonStyle({
  170. barStyle,
  171. buttonWrapperStyle
  172. })
  173. }
  174. }
  175. }