公司前端小妹使用vue-awesome-swiper做中奖弹幕，但在活动主页跳转到外部链接再返回时轮播停止。。。作为PM的我只能查资料帮忙解决了，无奈vue似乎在国外不是很热，面向Google无法解决，只能另辟蹊径了，从浏览器的事件入手。
主要思路是：监听浏览器页面展示事件onpageshow（当然可能会有兼容问题），触发时激活swiper离开时的下一个轮播。打印swiper的slideNext函数，发现有一个参数animating为false时才可生效，没深入研究，设置为false即可成功触发。也尝试过swiper.update/swiper.autoplay.start但都没正常触发，swiper.slideTo(具体轮播页index)可以生效但是看起来突然滚到某一个会让人感到很突兀，本来打算swiper.slideTo(swiper.activeIndex)这样，但是swiper.activeIndex是个数字却识别不了，直接写数字却可以，不是专业前端，神奇现象就让他神奇吧。
贴出代码吧。
vue-awesome-swiper版本:4.1.1
(用3.1.3也可以，不过把main.js和App.vue中的import 'swiper/css/swiper.css' 改成 import 'swiper/dist/css/swiper.css'，
main.js中的this.$refs.mySwiper.$swiper 改成 this.$refs.mySwiper.swiper;)
package.json
{
"name": "sw",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "han",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"swiper": "^5.4.1",
"vue": "^2.5.11",
"vue-awesome-swiper": "^4.1.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^3.5.3",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div id="app" class="swiper-no-swiping">
<swiper class="swiper" :options="swiperOption" ref="mySwiper">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
</swiper>
<a class="a-style" @click="linkGoTo('http://www.google.com.hk')">Google</a>
</div>
</template>
<script>
import 'swiper/css/swiper.css';
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
export default {
name: "swiper-example-vertical",
title: "Vertical slider",
components: {
Swiper,
SwiperSlide
},
methods: {
linkGoTo(url) {
window.open(url, "_self");
}
},
data() {
return {
swiperOption: {
direction: "vertical",
loop: true,
// autoplay: false,
// 自动播放
autoplay: {
delay: 300,
disableOnInteraction: false
},
// 设置轮播
effect: "fadeEffect",
//滑动速度
// speed: 500,
loopedSlides: 3,
slidesPerView: 3,
observer: true,
observeParents: true
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
}
},
mounted: function() {
window.onpageshow = function(event) {
// console.log('page show')
// console.log(this.swiper.slideNext);
if (event.persisted) {
if (this.swiper) {
this.swiper.animating = false;
this.swiper.slideNext();
}
}
}.bind(this);
}
};
</script>
<style lang="scss">
.swiper {
height: 300px;
width: 100%;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: 15px;
background-color: white;
}
.a-style {
color: #0500ee;
cursor: pointer;
text-decoration: underline;
}
.swiper__content {
height: 300px;
width: 100%;
}
.swiper__content-item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
font-size: 15px;
background-color: white;
}
</style>
效果图：
swiper.gif
