安装及配置
标题安装命令:
npm install swiper vue-awesome-swiper --save
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper);
swiper.css文件是在node_modules文件夹中,如果swiper版本在6.0.0及以上就要将import 'swiper/css/swiper.css’换成import ‘swiper/swiper-bundle.css’,否则就会报错。
在当前页面中
import {Swiper,SwiperSlide } from "vue-awesome-swiper";
//
components: {
Swiper,
SwiperSlide
},
template
<swiper :options="swiperOption"
ref="mySwiper">
<swiper-slide class="swiper-slide"
v-for="(item,index) in collocateContentDtos"
:key="index"
:style="{ backgroundImage:'url('+ item.image+')',backgroundSize:'100%'}">
<!-- @click.native="goJump(item)" 每一个图片的点击事件-->
<div class="bs-swiper-bottom">
<div>{{item.desc}}</div>
<div>{{item.date}}</div>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
script
data(){
return{
collocateContentDtos:[
{
image:'https://img.yzcdn.cn/vant/apple-1.jpg',
desc:'图片一',
date:'2020-01-05',
},
{
image:'https://img.yzcdn.cn/vant/apple-2.jpg',
desc:'图片一',
date:'2020-01-05',
},
{
image:'https://img.yzcdn.cn/vant/apple-3.jpg',
desc:'图片一',
date:'2020-01-05',
},
{
image:'https://img.yzcdn.cn/vant/apple-4.jpg',
desc:'图片一',
date:'2020-01-05',
},
{
image:'https://img.yzcdn.cn/vant/apple-1.jpg',
desc:'图片一',
date:'2020-01-05',
},
{
image:'https://img.yzcdn.cn/vant/apple-3.jpg',
desc:'图片一',
date:'2020-01-05',
}
],
swiperOption:{
slidesPerView: 4, //一行显示4个
spaceBetween: 10, //间隔30
freeMode: true,
speed: 1000, //滑动速度
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
},
style
.swiper-container{
width:100%;
padding:0 5px;
}
.swiper-slide {
width: 30%;
height: 70px;
position:relative;
}
.bs-swiper-bottom{
position:absolute;
bottom:0;
width:100%;
height:20px;
background-color: rgba(65, 105, 225, 0.7);
color:#fff;
font-size:10px;
display:flex;
justify-content: space-around;
align-items: center;
}