标签：轮播 属性 action art play 延迟 标签 mys lob
如果能看懂swiper官网文档，请忽略此篇文章。
遇到的问题：
主要是版本的问题，不同版本的swiper文件不同，导致总是引用不成功。按照我的版本来，肯定畅通无阻。实现后再尝试看官网文档，使用最新的版本。
1.首先下载swiper和vue-awesome-swipe。
下载我指定的版本，否则可能会打包错误。
npm install swiper@3.4.2 --save-dev //下载swiper npm install vue-awesome-swiper@3.1.3 --save-dev //下载vue-awesome-swiper
2.在vue项目main.js中引用
也可以将样式存在自己的文件目录下引入，这样可以直接更改轮播图的样式。
import VueAwesomeSwiper from ‘vue-awesome-swiper‘
import ‘swiper/dist/css/swiper.css‘ //引入swiper样式，不同版本路径不一样.
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3.在要显示的页面写入模板代码，有详细注释，耐心看完。
<template>
<div style="width: 65%;margin: 0 auto;" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide> //这里插入图片
<swiper-slide>3</swiper-slide>
<swiper-slide>4</swiper-slide>
<swiper-slide>5</swiper-slide>
<swiper-slide>6</swiper-slide>
</swiper>
<!--以下看需要添加-->
<!-- <div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项 -->
<div class="swiper-pagination" style="left: 50%;"></div> //这是选择器
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {//swiper3
autoplay: 3000,
speed: 1000,
pagination: {
el: ‘.swiper-pagination‘,
clickable: true
}, //选择器配置
autoplay: {
delay: 5000, //延迟5秒自动播放
stopOnLastSlide: false, //到最后一张图片是否停止自动播放。
disableOnInteraction: false //用户操作后是否停止自动播放。
},
}
}
},
methods: {
//通过获得的swiper对象来暂停自动播放
on_bot_enter() { //鼠标移入停止自动播放
this.mySwiper.autoplay.stop()
},
on_bot_leave() {//鼠标移出停止自动播放
this.mySwiper.autoplay.start()
},
},
//计算属性，获得可以操作的swiper对象
computed: {
mySwiper() {
// mySwiper 是要绑定到标签中的ref属性
return this.$refs.mySwiper.swiper
},
},
}
</script>
<style>
</style>
标签：轮播 属性 action art play 延迟 标签 mys lob
原文地址：https://www.cnblogs.com/userGao/p/13362097.html
