vue实现滑动和滚动效果

本文实例为大家分享了vue实现滑动和滚动效果的具体代码，供大家参考，具体内容如下

面板滑动效果，父组件是resultPanel，子组件是resultOption，仿照了iview中，Select组件的写法。

ev = ev || event，这个写法是兼容各个浏览器，在Firefox浏览器中，事件绑定的函数获取事件本身，是通过函数中传入的，而IE等浏览器中，则可以通过window.event或者event的方式来获取函数本身。

touchstart和click事件冲突解决： 去掉touchstart，touchmove和touchend事件中的e.preventDefault(); 它会阻止后面事件的触发；但去掉preventDefault事件会有问题，在微信网页中打开这个网页，向下滑动时会触发微信的下拉事件，但是在App中应用这组件就不会有这个问题。有一个解决微信网页中，手指向下滑动触发了微信的下拉刷新事件的方法，就是使用setTimeout。

setTimeout(() => {e.preventDefault(); },  200);

这样子可以在click事件发生后，再阻止之后的默认事件的触发。

滚动事件：滚动事件是在touchmove和touchend中触发的，面板的上滑事件和滚动事件不同时进行。

上滑时，判断面板状态，如果处于top状态，则触发scroll事件，手指离开面板时，仍是scroll事件；如果是处于normal状态，则是上滑面板，手指离开面板时，设置面板为top状态，并设置内容的滚动条可见；初始面板上滑到顶部时，第二次上滑面板则会触滚动条，内容可滚动；

下滑时，判断是否处于top状态，如果处于top状态，当内容区的scrollTop大于0，且手指初始位置位于内容区，那么就触发滚动，否则触发面板下滑；当处于normal状态时，下滑的话，可以采用不触发任何事件，或者可以下滑，但手指离开屏幕时，回归到默认位置，这里使用了后者的做法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。