vue插件vue-awesome-swiper的使用方法
vue-awesome-swiper插件用于快速创建轮播图,其中2.6.7版本较为稳定且无bug,我们以此为例,介绍giant插件的使用方法。
1、安装插件
npm install vue-awesome-swiper@2.6.7 --save
2、在入口文件main.js中引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3、创建Swiper组件,在template模板中引入以下代码(其中swiper-scrollbar,swiper-button-prev,swiper-button-next均按需添加)。
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
4、在对应的home组件中引入,注册。
<div class="home">
<home-header></home-header>
<home-swiper></home-swiper>
</div>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper"
export default {
name: "Home",
data() {
return {};
},
components: {
HomeHeader,
HomeSwiper
}
5、将第3步中的文本修改为图片,改变图片的尺寸,轮播图基本显示。
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg">
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
.swiper-img
width 100%
6、注意:在第5步中的样式设置后,刷新项目,在图片未加载出来时swiper后面的标签,会在swiper标签的位置,具体表现为抖动现象,当图片加载完成后,才会被挤到下方。那么如何解决这个问题呢?具体方法如下:
(1)在swiper标签外用div包裹
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg">
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
(2)修改样式
.wrapper
width 100%
overflow hidden
height 0
// 其中26.67%为轮播图片的宽高比
padding-bottom 26.67%
background #eee
.swiper-img
width 100%
备注:其中background #eee可用于图片没有加载出来时的背景显示。
7、轮播设置及小圆点样式修改
(1)配置swiperOption对象(轮播设置)
export default {
name: "HomeSwiper",
data() {
return {
swiperOption: {
pagination: ".swiper-pagination",
loop:true,
autoplay: 3000
}
};
}
};
(2)修改小圆点样式
在浏览器中通过F12查看小圆点样式,是通过一个class名为swiper-pagination-bullet-active的标签控制的,所以可以通过修改该标签的样式实现。初步设想如下:
.swiper-pagination-bullet-active
background red
发现,没有起到任何作用。这是为什么呢?分析后发现,swiper-pagination-bullet-active这个属性并没有在Swiper组件中出现,所有没有起到作用。解决方案:做以下修改,实现样式的穿透即可,不受scoped的限制。
.wrapper >>> .swiper-pagination-bullet-active
background red
效果图(小圆点的样式已经改变):
8、此时轮播的图片是固定的图片,做一下完善,使用v-for循环。注意:每个轮播图片id属性需要是字符串(String)。
代码修改如下:
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl">
</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,
autoplay: 3000
},
swiperList: [
{
id:"0001",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1806/8d/09723d20a9b88402.jpg_750x200_56b1edfa.jpg"
},
{
id: "0002",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg"
}
]
};
}
};
</script>
<style scoped lang="stylus">
.wrapper >>> .swiper-pagination-bullet-active
background red
.wrapper
width 100%
overflow hidden
height 0
// 其中26.67%为轮播图片的宽高比
padding-bottom 26.67%
background #eee
.swiper-img
width 100%
</style>