Vue系列——vue2封装swiper轮播组件

第三步：编写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