简介
- vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper,所以swiper里面的属性多数能应用到vue-awesome-swiper中,也可以根据swiper文档来设置vue-awesome-swiper属性,swiper官方文档
- 在这里我使用的是vue-awesome-swiper V3.1.3(对应swiper4),文档参考
- vue-awesome-swiper的使用方法各种坑,要么版本对不上,要么swiper.css引用地址不对,要么swiper-pagination不显示,要么自动轮播失效,下面介绍一下正确的使用姿势。
首先版本,请使用3.1.3左右的,别幻想用什么4以上的或别的版本,目前就这个版本最稳定,其它的可以自己试坑测试。
一、安装
//直接安装版本3即可,自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S
二、按需引入
在页面引入即可,没必要全局引入,因为很少所有页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。
页面引入
请注意此处引入的swiper, swiperSlide的s是小写,搞错会报错。
<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
};
</script>
三、全局引入
虽然按需引入性能好,但我也要全局一下,哈哈
main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
//引入样式
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)
四、调用代码
<template>
<div class="app-container">
<div class="swiper">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide
v-for="item in 5"
:key="item"
:style="{backgroundImage: 'url('+require('@/assets/img/swiper-img.png')+')'}">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</div>
</template>
<script>
//导入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'default',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination', //与slot="pagination"处 class 一致
clickable: true, //轮播按钮支持点击
}
}
};
},
components: {
swiper,
swiperSlide
},
};
</script>
<style lang="scss" scoped>
.app-container{
.swiper{
width: 100%;
&>>>.swiper-container {
width: 100%;
.swiper-slide {
width: 100%;
height: 0;
padding-bottom: 28.1%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination{
.swiper-pagination-bullet-active{
background-color: #F29B76;
}
}
}
}
}
</style>