第三步:编写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: ‘.