bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-slider/mpwxs.wxs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
/**
 * ä½¿ç”¨wxs方案实现slider
 * å…¼å®¹å¾®ä¿¡ï¼ŒQQ，H5，Vue版的安卓和iOS
 */
/**
 * å¼€å§‹æ»‘动操作
 * @param {Object} e
 * @param {Object} ownerInstance
 */
function onTouchMove(e, ownerInstance) {
   // wxs事件对象下有一个instance属性，表示当前触发此事件的组件的实例，通过该实例，可以获取相关的dataset，设置样式等信息
   // https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
   var instance = e.instance;
   // getState()为一个对象，挂载在instance上，类似组件的data一样，可以存放一些变量，供以后的触发事件中使用
   var state = instance.getState()

   // æ»‘块组件的整体尺寸信息
   var mp = state.mp
   if(mp.disabled) {
      return
   }
	
   var distanceX = getTouchX(e) - mp.left
   // èŽ·å¾—移动距离对整个滑块的百分比值，此为带有多位小数的值，step大于1时，不能用此更新视图
   var percent = (distanceX / mp.width) * 100

   updateSliderPlacement(instance, ownerInstance, percent, 'moving')
	
   // é˜»æ­¢é¡µé¢æ»šåŠ¨ï¼Œå¯ä»¥ä¿è¯åœ¨æ»‘动过程中，不让页面可以上下滚动，造成不好的体验
   e.stopPropagation && e.stopPropagation() 
   e.preventDefault && e.preventDefault()
}

function onClick(e, ownerInstance) {
   var instance = e.instance
   var state = instance.getState()
   var mp = state.mp
   if(mp.disabled) {
      return
   }
	
   // ç›´æŽ¥ç‚¹å‡»æ»‘块的情况，计算方式与onTouchMove方法相同
   var value = ((e.detail.x - mp.left) / mp.width) * 100
   updateSliderPlacement(instance, ownerInstance, value, 'click')
}

function sizeReady(newValue, oldValue, ownerInstance, instance) {
   // é¡µé¢åˆå§‹åŒ–时候，也会触发此方法，传递的值为空，这里不执行往后的逻辑
   if(!newValue || newValue.disabled) {
      return 
   }
   var state = instance.getState()
   state.mp = newValue
   updateSliderPlacement(instance, ownerInstance, newValue.value)
}

// è®¾ç½®æ»‘点的位置
function updateSliderPlacement(instance, ownerInstance, value, event) {
   var state = instance.getState()
   var mp = state.mp
   if(mp.disabled) {
      return
   }

   var percent = 0
   if (mp.step > 1) {
      // å¦‚æžœstep步进大于1，需要跳步，所以需要使用Math.round进行取整
      percent = Math.round(Math.max(mp.min, Math.min(value, mp.max)) / mp.step) * mp.step
   } else {
      // å½“step=1时，无需跳步，充分利用wxs性能，滑块实时跟随手势，达到丝滑的效果
      percent = Math.max(mp.min, Math.min(value, mp.max))
   }
   // è¿”回组件的实例
   var gapInstance = ownerInstance.selectComponent('.u-slider__gap')
   // åœ¨ç§»åŠ¨æœŸé—´ï¼Œä¸å…è®¸transition动画，否则会造成卡顿
   gapInstance[event === 'click' ? 'addClass' : 'removeClass']('u-slider__gap--ani')
   // è°ƒç”¨é€»è¾‘层的方法，修改v-model绑定的值
   ownerInstance.callMethod('updateValue', Math.round(percent))
   if(event) {
      ownerInstance.callMethod('emitEvent', {
         event: event,
         value: Math.round(percent)
      })
   }
	
   // è®¾ç½®ç§»åŠ¨çš„值
   gapInstance.requestAnimationFrame(function() {
      gapInstance.setStyle({
         width: percent / 100 * mp.width + 'px',
      })
   })
}

// å¼€å§‹æ»‘动
function onTouchStart(e, ownerInstance) {
   ownerInstance.callMethod('emitEvent', {
      event: 'start', 
      value: null
   })
}

// åœæ­¢æ»‘动
function onTouchEnd(e, ownerInstance) {
   ownerInstance.callMethod('emitEvent', {
      event: 'end', 
      value: null
   })
}

// èŽ·å–当前手势点的X轴位移值
function getTouchX(e) {
   return e.touches[0].clientX
}

module.exports = {
   onTouchStart: onTouchStart,
   onTouchMove: onTouchMove,
   onTouchEnd: onTouchEnd,
   sizeReady: sizeReady,
   onClick: onClick
}