1、vue-awesome-swiper组件的安装:
npm install vue-awesome-swiper --save
如果指定版本号:
npm install vue-awesome-swiper@2.6.7 --save
2、 vue-awesome-swiper的官网:
https://github.com/surmon-china/vue-awesome-swiper
3、使用vue-awsome-swiper:
main.js中增加:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
这里有出现一个有意思的,就是 我吧本来应该放在main.js中的代码 放置到router/index.js中也是可以用的。 我想应该是main.js中一开始就调用了路由组件。所以也就一并执行了。
4、新建轮播图组件 并添加至Home.vue组件中
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
<div>test</div>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper
}
}
</script>
<style>
</style>
5、添加需要轮播的元素至 “< template></ template> (这是指另外新建的轮播图子组件中的< template>)
<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>
以下3个元素不要的话可以删掉
//这个是左箭头
<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>
6、设置轮播内容:
①设置data
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
//绑定分页元素
pagination: '.swiper-pagination',
//设置循环,意思就是分页到最后一张时,在往后划就自动滑到第一张
loop: true
},
swiperList: [
{
id: '0001',
imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
},
{
id: '0002',
imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20192/3cdc880b14b7fc6f9c59e6f0f89b857d.jpg_750x200_f5a7ad47.jpg'
}]
}
}
}
</script>
②数据渲染至页面:
<div class="wrapper">
<swiper :options="swiperOption">
<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>
③为了在图片元素完整加载好之前,需要预先预留好空间。所以需要设置如下样式:
<style lang="stylus" scoped>
//设置滚动条样式颜色(就那几个圆点)
//因为.swiper-pagination-bullet-active 这个类不是Swiper组件中的类 所以需要穿透过去
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
//这个是设置好元素空间的固定高度
.wrapper
overflow: hidden
width: 100%
height: 0
这里的意思是高度设置为宽度的26.67% 这个比例就是图片的高/宽的比例
padding-bottom: 26.67%
background: #eee
// height: 26.68vw
.swiper-img
width: 100%
</style>
7、效果图
以上就是vue-awesome-swiper的一般应用。其他方面的可操作官方文档说明:
https://www.swiper.com.cn/api/index2.html
源代码和使用方法:
https://github.com/surmon-china/vue-awesome-swiper