一些常见bug遇到的坑

1,562 阅读2分钟

el-slider

这是el-ui里面的一个滑块组件,当时产品测试提出一个需求,因为是触屏端,然后滑动这个el-slider时,可能会把它的容器也进行带着滑动。因为容器本身是可以进行sroll的,但是滑动el-slider,我们只能让el-slider滑动,可能由于手指触摸的时候,相对于把下面的容器也按到了。

  • 解决方法
    • 给el-slider添加事件
slidr 对象
slider.addEventListener('touchstart',()=>{
    让box 容器 变成 scroll-hidden
})
slider.addEventListener('touchend',()=>{
    让box 容器 变回 scroll-auto
})

关于触屏端,可以左右滑动

这也是最近解决的一个bug。 其实很简单,只需要给外面的盒子添加overflow-x:hidden就可以了。实际需求看自己应该加在哪个盒子里面。

触屏端texearea 触发了滚动事件

需求是这样的,一个texearea,在触屏端,绑定了touchstart事件,调用一个函数,然后当我们手指滚动的时候,是不会调用这个函数的。

这个坑就在于touchstart,每次我们手指触屏上去就会触发这个事件,所以我们滚动的时候之前,就会先调用这个函数。 解决方法很简单,就是通过它的touch事件的其他监听。touchend 或者touchmove

方法一 通过判断它是否是由手指滚动触发发送。

 let isMove = false
 text.addEventListener('touchstart', (event) => {  
     console.log('输入了内容');
     isMove = false;
               
 });
 text.addEventListener('touchmove',()=>{
    isMove = true
 })       
  text.addEventListener('touchend',()=>{
    if(!isMove) {
        hello()
    }
 })

方法二 既然你是手指触屏滚动,那么这滚动肯定是有一段时间的,我们可以通过拿取这个段时间来进行对比,判断是否手指触屏滚动了。 方法三 既然滚动那么就会有滚动距离,我们可以通过scrollTop的差值,判断当前是否进行滚动了。滚动前的和滚动后的差比如小于多少,我们就假定它滚动,不触发函数。

补充 对于触屏端,由touch事件的,一定要看仔细,看看是不是事件发生的顺序不对。