el-slider移动端的兼容性问题及其修正方案 #22820
ZHOU-jinhan
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
【功能缺陷描述】
el-slider在移动端下的业务处理逻辑如下所示。
onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=e.touches[0].clientY,e.clientX=e.touches[0].clientX),this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},
该逻辑中,简单的把触点获取写成
e.touches[0]
,使得两个滑块的同时滑动出现了互相的干扰。【缺陷改正方案】
以下代码通过adaptTouches这一触点自适应的函数,在同时多触点中,根据滑块位置自动获取各自对应的触点,从而取消了这种干扰。
adaptTouches:function(touches){for (var r = 0; r < touches.length; r++) { if ((Math.abs(touches[r].clientX-this.$parent.$el.offsetLeft-this.$parent.$el.clientWidth/2)<this.$parent.$el.clientWidth+2.5)&&(Math.abs(touches[r].clientY-this.$parent.$el.offsetTop-this.$parent.$el.clientHeight/2)<this.$parent.$el.clientHeight+2.5)){return touches[r];};};},onDragStart:function(e){this.dragging=!0,this.isClick=!0,"touchstart"===e.type&&(e.clientY=this.adaptTouches(e.touches).clientY,e.clientX=this.adaptTouches(e.touches).clientX),this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(e){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var t=0;"touchmove"===e.type&&(e.clientY=this.adaptTouches(e.touches).clientY,e.clientX=this.adaptTouches(e.touches).clientX),this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},
建议有需要者,对于el-slider的源码进行上述修正
Beta Was this translation helpful? Give feedback.
All reactions