创建新分支:
把线上的分支拉到本地来:
git pull
git checkout index-swiper
轮播插件Vue-Awesome-Swiper
使用稳定版本v2.6.7
引入vue-awesome-swiper: npm install vue-awesome-swiper@2.6.7 --save
全局引入vue-awesome-swiper:
在main.js中引入:
import
VueAwesomeSwiper
from
'vue-awesome-swiper'
// require styles
import
'swiper/dist/css/swiper.css'
Vue.
use(
VueAwesomeSwiper)
新建Swiper.vue:
<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide>
<img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg" />
</swiper-slide>
<swiper-slide>
<img class="img-swiper" src="http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data () {
return {
swiperOption: {
pagination: '.swiper-pagination'
}
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25%
background: #eee
.img-swiper
width: 100%
</style>
效果:
data () {
return {
swiperOption: {
pagination: '.swiper-pagination'
}
}
}
pagination控制分页的点。
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
穿透,只要是wrapper下的swiper-pagination-bullet-active背景色为白色。
优化:通过遍历列表循环输出
在data中添加swiperList:
swiperList: [
{
id: '0001',
url: 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
},
{
id: '0002',
url: 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
},
{
id: '0003',
url: 'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'
}
]
<div
class=
"wrapper"
>
<swiper
:options
=
"
swiperOption
"
ref
=
"mySwiper"
@someSwiperEvent
=
"
callback
"
>
<swiper-slide
v-for
=
"
item
of
swiperList
"
:key
=
"
item
.
id
"
>
<img
class=
"img-swiper"
:src=
"
item
.
url
"
/>
</swiper-slide>
<div
class=
"swiper-pagination"
slot=
"pagination"
></div>
</swiper>
调整为可循环轮播:
把分支上的内容合并到主分支:
git checkout master
git merge origin/index-swiper
git push