7-3#去哪儿网app#轮播图

在gitee上创建index-swiper分支

在git上输入 git pull 、git checkout index-swiper，则在本地进入了index-swiper分支，即接下来输入的代码都是在此分支上进行的

本此目标的轮播图：

下载轮播插件：vue-awesome-swiper （github）

可指定版本：npm install swiper vue-awesome-swiper@2.6.7 --save

然后引入插件，在入口文件main.js里

import VueAwesomeSwiper from 'vue-awesome-swiper'

注意引入css时要写：

import 'swiper/swiper-bundle.css'

否则报错

 其余部分见github中文档介绍自行引入

 

由于去哪儿网的移动端界面改变，从别处找的图片尺寸与视频不一样，所以padding-bottom的比例也要相应变化：

注意加载的时候防止文字抖动的代码

<style lang="stylus" scoped>
	.wrapper
		overflow: hidden
		width :100%
		height: 0
		padding-bottom: 26.67%
        上面的四行意思是 加载的时候防止文字抖动
		background: #eee
		.swiper-img
			width: 100%
</style>

样式穿透：

轮播下面的小点想要变颜色，由于类不在这个组件中，而是在其他组件中(与轮播图插件有关)：

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
			background: #ffffff !important

使用v-for循环

则swiper标签可以只留一个，记得要写:key

<swiper-slide v-for="item of swiperList" :key="item.id">
    <img class="swiper-img" :src="item.imgUrl" alt="">
</swiper-slide>

左右循环：

loop: true 则实现首尾都可循环

提交到gitee

git add  .

git commit -m 'change'

git push

git checkout master   切换到master分支上

git merge origin/index-swiper  把线上的index-swiper分支上新增的内容合并到本地的master分支

git push 把master内容提交到线上

则现在master放的是整个项目最新的代码  index-swiper放的是这次的代码