使用vue-awesome-swiper来写轮播图,首先npm安装
npm install vue-awesome-swiper --save
安装好后,在入口文件main.js 添加一下代码
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在需要使用轮播图的组件中
<template>
<div>
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data(){
return{
swiperOption:{
pagination:'.swiper-pagination',
loop:true
},
swiperList:[{
id:'0001',
imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
},{
id:'0002',
imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped>
.swiper-img{
width: 100%;
}
.wrapper >>> .swiper-pagination-bullet-active{
background:#fff !important
}
.wrapper{
overflow :hidden
width:100%
height:0
padding-bottom :31.25%
}
</style>
但是写完运行之后,发现图片垂直显示
解决办法,如果你安装的版本在2.6.0以上,需要手动加载css文件,我这里安装的版本是2.6.7
在main.js文件再加入一行
import 'swiper/dist/css/swiper.css‘
这样图片就会水平排放了
还有,如果使用该插件出现图片不显示的情况,在node-modules里找到vue-awesome-swiper这个包,删除,在重新npm 安装就行了