vue实现滑动和滚动效果 vue实现滑动和滚动效果

本文实例为大家分享了vue实现滑动和滚动效果的具体代码，供大家参考，具体内容如下
面板滑动效果，父组件是resultPanel，子组件是resultOption，仿照了iview中，Select组件的写法。

//scoped是指这个样式只能用于当前组件.transparent {bottom: 0; left: 0; position: absolute; right: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity .3s; z-index: -1000000000; } .transparent.active {opacity: 1; z-index: 0; } .mapbox-result {height: calc(100% - 2.8vw); background: #fff; position: absolute; font-family: PingFangSC-Regular; font-size: 12px; color: #4A4A4A; bottom: 0; width: 94.4vw; margin: 0 2.8vw; outline: 0; overflow: auto; box-sizing: border-box; top: 100%; overflow: hidden; border-radius: 5px 5px 0 0; box-shadow: 0 0 12px 0px rgba(153, 153, 153, 0.25); } .mapbox-result-content {position: relative; background-color: #fff; border: 0; } .mapbox-result-header {padding: 24px 10vw; line-height: 1; text-align: center; } .mapbox-result-header-title {white-space: nowrap; } .mapbox-result-close {position: absolute; width: 16px; height: 16px; background: url('../../assets/close-black@2x.png'); background-size: 100% 100%; background-repeat: no-repeat; right: 5.6vw; top: 22px} .mapbox-result-body {height: auto; }

.mapbox-result-option {height: 60px; width: calc(100% - 8.3vw); display: block; border-bottom: 1px solid #dbd6d6; box-sizing: border-box; margin: 0 auto; overflow: hidden; } .mapbox-result-option-content {padding: 0; margin: 0; font-family: PingFangSC-Regular; font-size: 12px; color: #4A4A4A; position: relative; display: inline-block; width: 100%; } .mapbox-btn {display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; vertical-align: middle; touch-action: manipulation; background-image: none; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; } .mapbox-result-option-btn {position: relative; border-radius: 50%; height: 30px; width: 8.3vw; padding: 0; outline: none; margin: 15px 4.2vw 15px 0; z-index: 1; /*避免文字挡住了按钮*/} .mapbox-btn-primary {color: #fff; background-color: #2A70FE; border-color: #2A70FE; } .mapbox-btn-right {float: right; margin-right: 4.2vw; } .mapbox-result-option-icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: 100% 100%; width: 2.9vw; height: 18px; background: url("../../../static/image/icon_nav3.png") no-repeat; }.mapbox-result-option-nav {background: url("../../assets/btn_route_planning_normal.png"); width: 30px; height: 30px; background-size: 100% 100%; background-repeat: no-repeat; float: right; display: block; position: absolute; right: 0; top: 15px; z-index: 1; } .mapbox-result-option-item {display: block; position: relative; margin: 10px auto; } .mapbox-result-option-item-main {display: block; vertical-align: middle; font-size: 16px; color: #4A4A4A; } .mapbox-result-option-title {font: 15px/21px PingFangSC-Regular; position: relative; } .mapbox-result-option-order {font: 15px/21px PingFangSC-Medium; position: relative; margin-left: 1.9vw; margin-right: 4.6vw; } .mapbox-result-option-note {font: 12px/16px PingFangSC-Regular; color: #9B9B9B; white-space: normal; position: relative; margin-left: 12.5vw; margin-top: 3px; }

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状态时，下滑的话，可以采用不触发任何事件，或者可以下滑，但手指离开屏幕时，回归到默认位置，这里使用了后者的做法。
【vue实现滑动和滚动效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。