使用swiper4平滑纵向无间隙滚动,鼠标点击或拖动后,动画未全部完成,鼠标移出 自动轮播失效
每次遇见一些刁钻的问题,然后百度解决的时候,遇见的都是粘贴复制的、类似的, 完了还解决不了,真的感觉特别心累。。。。
先概括一下网上搜到的吧
disableOnInteraction
: 用户操作之后是否禁止autoplay(默认值: true: 禁止);
speed: 2000,
autoplay: {
delay: 2500,
disableOnInteraction: false,
}
这里要注意一点: autoplay.delay 的值一定要大于 speed, 不然也没有用
autoPalyDisableOnInteraction
: 这个逻辑和上面第一个是一致的,只是这个是 v3 版本,disableOnInteraction
是v4及之后的版本,
autoPalyDisableOnInteraction: false,
autoplay: {
...
}
- 自己定义
onmouse
事件
mySwiper.el.onmouseover = function(){
mySwiper.autoplay.stop();
}
mySwiper.el.onmouseout = function(){
mySwiper.autoplay.start();
}
pauseOnMouseEnter
:最方便的,也不会产生什么问题,但是启用版本:6.6.2…
autoplay: {
pauseOnMouseEnter: true,
}
那么问题来了,v4版本,并且 delay:0,上面一个都用不了。。。
那就自己搞一个
最后还是只能结合api来自己做一个暂停,烦人
主要就是结合 transitionEnd
& slideNext
;
当当前过渡完成之后,立马切换到下一张;
话不多说,直接贴最终代码:
<template>
<div class='swiper-page'>
<div class="swiper" id="swiper" ref="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in 20" :key="item" :style="{backgroundColor: colorList[item % colorList.length]}"> slide-item {
{
item }}</div>
</div>
</div>
</div>
</template>
<script>
import Swiper from 'swiper';
export default {
data() {
return {
swiperIns: null,
swiperPause: false, // 轮播暂停
colorList: ['#FC88A6', '#F7A753', '#3F8EFA', '#33D260', '#6AC1E1'],
};
},
mounted() {
this.$nextTick(_ => {
// 每次实例化之前,销毁之前的实例,防止动画紊乱
if (this.swiperIns) {
this.swiperIns.destroy();
}
this.swiperIns = new Swiper("#swiper", {
speed: 2000,
direction: 'vertical',
height: 80,// 这里不使用 slidesPerView 自动计算,不然可能初始化的时候会出现问题
loop: true,
loopAdditionalSlides: 5,
preventLinksPropagation: true,
on: {
transitionEnd: () => {
// 过渡完成就尝试跳转下一张
this.swiperAutoPlay();
}
}
});
this.swiperAutoPlay(); // 需要手动开始第一次跳转
this.$refs.swiper.onmouseenter = () => {
this.swiperPause = true;
};
this.$refs.swiper.onmouseleave = () => {
// 重新开始轮播需要设置下面两项数据
this.swiperPause = false;
this.swiperAutoPlay();
}
});
},
methods: {
// 尝试播放下一张
swiperAutoPlay() {
this.$nextTick(_ => {
if (this.swiperPause === false) {
this.swiperIns.slideNext();
}
})
},
}
};
</script>
<style lang='scss' scoped>
.swiper-page {
#swiper {
margin: 200px auto 0px;
width: 500px;
height: 400px;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: hidden;
.swiper-wrapper {
transition-timing-function: linear;
}
.swiper-slide {
width: 100%;
height: 80px;
line-height: 80px;
font-size: 30px;
text-align: center;
color: #ccc;
box-sizing: border-box;
border: 1px solid #ccc;
}
}
}
</style>