mpwxs.wxs 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. /**
  2. * 使用wxs方案实现slider
  3. * 兼容微信,QQ,H5,Vue版的安卓和iOS
  4. */
  5. /**
  6. * 开始滑动操作
  7. * @param {Object} e
  8. * @param {Object} ownerInstance
  9. */
  10. function onTouchMove(e, ownerInstance) {
  11. // wxs事件对象下有一个instance属性,表示当前触发此事件的组件的实例,通过该实例,可以获取相关的dataset,设置样式等信息
  12. // https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
  13. var instance = e.instance;
  14. // getState()为一个对象,挂载在instance上,类似组件的data一样,可以存放一些变量,供以后的触发事件中使用
  15. var state = instance.getState()
  16. // 滑块组件的整体尺寸信息
  17. var mp = state.mp
  18. if(mp.disabled) {
  19. return
  20. }
  21. var distanceX = getTouchX(e) - mp.left
  22. // 获得移动距离对整个滑块的百分比值,此为带有多位小数的值,step大于1时,不能用此更新视图
  23. var percent = (distanceX / mp.width) * 100
  24. updateSliderPlacement(instance, ownerInstance, percent, 'moving')
  25. // 阻止页面滚动,可以保证在滑动过程中,不让页面可以上下滚动,造成不好的体验
  26. e.stopPropagation && e.stopPropagation()
  27. e.preventDefault && e.preventDefault()
  28. }
  29. function onClick(e, ownerInstance) {
  30. var instance = e.instance
  31. var state = instance.getState()
  32. var mp = state.mp
  33. if(mp.disabled) {
  34. return
  35. }
  36. // 直接点击滑块的情况,计算方式与onTouchMove方法相同
  37. var value = ((e.detail.x - mp.left) / mp.width) * 100
  38. updateSliderPlacement(instance, ownerInstance, value, 'click')
  39. }
  40. function sizeReady(newValue, oldValue, ownerInstance, instance) {
  41. // 页面初始化时候,也会触发此方法,传递的值为空,这里不执行往后的逻辑
  42. if(!newValue || newValue.disabled) {
  43. return
  44. }
  45. var state = instance.getState()
  46. state.mp = newValue
  47. updateSliderPlacement(instance, ownerInstance, newValue.value)
  48. }
  49. // 设置滑点的位置
  50. function updateSliderPlacement(instance, ownerInstance, value, event) {
  51. var state = instance.getState()
  52. var mp = state.mp
  53. if(mp.disabled) {
  54. return
  55. }
  56. var percent = 0
  57. if (mp.step > 1) {
  58. // 如果step步进大于1,需要跳步,所以需要使用Math.round进行取整
  59. percent = Math.round(Math.max(mp.min, Math.min(value, mp.max)) / mp.step) * mp.step
  60. } else {
  61. // 当step=1时,无需跳步,充分利用wxs性能,滑块实时跟随手势,达到丝滑的效果
  62. percent = Math.max(mp.min, Math.min(value, mp.max))
  63. }
  64. // 返回组件的实例
  65. var gapInstance = ownerInstance.selectComponent('.u-slider__gap')
  66. // 在移动期间,不允许transition动画,否则会造成卡顿
  67. gapInstance[event === 'click' ? 'addClass' : 'removeClass']('u-slider__gap--ani')
  68. // 调用逻辑层的方法,修改v-model绑定的值
  69. ownerInstance.callMethod('updateValue', Math.round(percent))
  70. if(event) {
  71. ownerInstance.callMethod('emitEvent', {
  72. event: event,
  73. value: Math.round(percent)
  74. })
  75. }
  76. // 设置移动的值
  77. gapInstance.requestAnimationFrame(function() {
  78. gapInstance.setStyle({
  79. width: percent / 100 * mp.width + 'px',
  80. })
  81. })
  82. }
  83. // 开始滑动
  84. function onTouchStart(e, ownerInstance) {
  85. ownerInstance.callMethod('emitEvent', {
  86. event: 'start',
  87. value: null
  88. })
  89. }
  90. // 停止滑动
  91. function onTouchEnd(e, ownerInstance) {
  92. ownerInstance.callMethod('emitEvent', {
  93. event: 'end',
  94. value: null
  95. })
  96. }
  97. // 获取当前手势点的X轴位移值
  98. function getTouchX(e) {
  99. return e.touches[0].clientX
  100. }
  101. module.exports = {
  102. onTouchStart: onTouchStart,
  103. onTouchMove: onTouchMove,
  104. onTouchEnd: onTouchEnd,
  105. sizeReady: sizeReady,
  106. onClick: onClick
  107. }