制作Vue版本的轮播图
第一步：
安装依赖
npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
第二步：
全局安装
在main.js里面操作：
import VueAwesomeSwiper from 'vue-awesome-swiper'
/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'
/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)
第三步：
在自己的组件文件夹中 新建一个轮播图组件 MySwiper.vue：
并复制以下代码到你的组件中：
<template>
<div class="imglist">
<h1>轮播图</h1>
<swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
@click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件
<swiper-slide v-for="(v,i) in imgList" :key="i" @click.native="goto(v.url)">
<img :src="v.imgurl" alt="" width="100%" height="100%" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "ImgList",
data() {
return {
imgList:[],
swiperOptions: {
pagination: {
el: ".swiper-pagination",
clickable:true,
effect:'fade'
},
autoplay: {
delay:1000,
/* 如果设置为true，当切换到最后一个slide时停止自动切换。 */
stopOnLastSlide:false,
/* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
disableOnInteraction:false
},
无缝衔接
loop:true
}
}
},
created(){
数据是异步的，数据还没有到情况下，轮播图组件已经开始加载了，导致配置无缝轮播的时候效果出不来怎么办？
解决办法：使用条件判断，当数据没获取道德时候不加载轮播图
axios.get('/data/imgList.json')
.then(res=>{
this.imgList=res.data.imgList;
/* 使用refs的方法，必须要配置this.$nextTick获取到dom之后再执行sildeTo方法 */
this.$nextTick(()=>{
组件是后来加载上去的，相当于更新了dom的值，这时候想要获取dom必须要借助$nextTick方法
/* 在异步操作里面sildeTo第一个参数表示第几张 */
this.$refs.mySwiper.swiper.slideTo(3,1000,false)
})
})
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
},
},
methods:{
goto(url){
window.open(url)
}
}
};
</script>
<style scoped>
/* scoped会防止组件内的样式污染全局使用，会优先使用组件内的样式 */
.swiper-container {
width: 500px;
height: 400px;
border: 1px solid red;
display: block;
}
</style>
最后把组件引用import到需要的文件中去
