创建新分支:
把线上的分支拉到本地来:
git pull
git checkout index-swiper
轮播插件Vue-Awesome-Swiper
使用稳定版本v2.6.7
引入vue-awesome-swiper: npm install [email protected] --save
扫描二维码关注公众号,回复:
1483714 查看本文章
全局引入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