新建了一个子组件叫做Banner.vue，这个子组件自然就是指轮播图组件swiper（感兴趣的可以去官网看看）。
第一步：安装swiper。
npm install --save swiper
第二步：写template。
轮播图是一个列表，所以这里使用到了v-for来遍历，轮播的部分是swiper-slide元素。我把图片路径绑定到了style属性上面。
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide" v-for="item in listImg">
<img :src="item.url"/>
<!--<img src="../../assets/01.jpg"/>-->
</p>
</p>
<p class="swiper-pagination swiper-pagination-white"></p>
</p>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide" v-for="item in listImg">
<img :src="item.url"/>
<!--<img src="../../assets/01.jpg"/>-->
</p>
</p>
<p class="swiper-pagination swiper-pagination-white"></p>
</p>
第三步：编写Banner.vue的JavaScript代码。
根据swiper的官方教程，我们需要实例化swiper。
1、导入swiper；
2、导入swiper的css；
3、通过获取图片数据listImg；
4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
data(){
return {
//图片路径
listImg:[
{url:'../../../static/01.jpg'},
{url:'../../../static/02.jpg'},
{url:'../../../static/03.jpg'}
]
}
},
mounted() {
console.log('mounted', this)
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
disableOnInteraction: false,
},
})
}
}
</script>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
data(){
return {
//图片路径
listImg:[
{url:'../../../static/01.jpg'},
{url:'../../../static/02.jpg'},
{url:'../../../static/03.jpg'}
]
}
},
mounted() {
console.log('mounted', this)
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
disableOnInteraction: false,
},
})
}
}
</script>
第四步：写css样式
<style>
.swiper-container {width: 100%; height: 10rem;}
.swiper-wrapper {width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%;}
.swiper-pagination-bullet { width:0.833rem;
height: 0.833rem;display: inline-block; background: #7c5e53; }
.swiper-slide img{width: 100%;height: 100%; }
</style>
<style>
.swiper-container {width: 100%; height: 10rem;}
.swiper-wrapper {width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%;}
.swiper-pagination-bullet { width:0.833rem;
height: 0.833rem;display: inline-block; background: #7c5e53; }
.swiper-slide img{width: 100%;height: 100%; }
</style>
完整代码：
<template>
<p>
<!--轮播图---写法-->
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide" v-for="item in listImg">
<img :src="item.url"/>
<!--<img src="../../assets/01.jpg"/>-->
</p>
</p>
<p class="swiper-pagination swiper-pagination-white"></p>
</p>
</p>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
data(){
return {
//图片路径
listImg:[
{url:'../../../static/01.jpg'},
{url:'../../../static/02.jpg'},
{url:'../../../static/03.jpg'}
]
}
},
mounted() {
console.log('mounted', this)
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
disableOnInteraction: false,
},
})
}
}
</script>
<style>
.swiper-container {width: 100%; height: 10rem;}
.swiper-wrapper {width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%;}
.swiper-pagination-bullet { width:0.833rem;
height: 0.833rem;display: inline-block; background: #7c5e53; }
.swiper-slide img{width: 100%;height: 100%; }
</style>
