首页轮播图 - 爱码网

1. 创建分支
打开码云官网，创建一个git分支，在分支上进行git功能的开发，然后合并到主分支mask上。

点击“一个分支”：

新建分支，在这个分支中写首页轮播图的功能：

这样我们在线上就新建好了一个轮播图的分支，接下来通过指令git pull将线上的分支拉到本地来：

切换到该分支，指令git checkout index-swiper：

查看状态，指令git status：

最后Ctrl+C，重启。

2. 轮播图—vue-awesome-swiper

登录GitHub，搜索vue-awesome-swiper：
为了保证系统bug，采用较老的一个版本，v2.6.7。（有出现其他的依赖丢失的问题，重新安装即可）。
需要全局使用插件，在main.js中引入：

这样我们就可以在vue中使用这个插件了。
使用
和Header.vue创建同级组件Swiper.vue，官方的解释是：想要实现轮播图的效果，引入template中的代码即可：

即：

定义变量swiperOption：

在根组件中引入局部组件HomeSwiper：
优化
以下的两句代码表示的是轮播图的左右切换两个箭头，目前不需要，删掉：

同样，下面这行代码显示的是滚动条，删掉：

最后将轮播图的图片插入到内容中：

刷新页面。

3. bug处理
在Home.vue模板中添加一行内容为test的div标签：
首页轮播图
将

改为Fast 3G，当刷新我们的页面时，会发现有明显的抖动感：这是因为test一开始是没有高度的，当图片完全加载出来的时候才会有高度，所以会产生抖动感。
解决：
将swiper标签最外层添加一层class=“wrapper”的div标签；
然后修改样式：
首页轮播图
查看图片宽高比，例如以上轮播图中图片宽高为：640*200，高/宽=31.25%。修改样式：

使用padding-bottom实现基于父元素宽度的高度自适应。
4. 分页符实现
即实现轮播图图片下方的“点”，表示当前图片被选中，可以在swiperOption这个参数中填写一个配置项—pagination，将.swiper-pagination这个div传进去：
首页轮播图
效果：

插看控制台，会发现分页符的样式是由swiper-pagination-bullet-active这个类决定的。尝试修改样式却发现没有生效
这是因为我们在组件style标签中设置了scoped属性，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。这里的原理相同，因为我们的样式只修饰当前组件HomeSwiper，而swiper-pagination这个样式类实际上是传递给swiper这个组件的，然后swiper这个组件决定显示什。所以应该写成：
首页轮播图
这样就实现了组件间样式的穿透。
这里补充一点组件穿透的知识：

5. 图片循环输出

在data中定义一个数组swiperList，定义两组对象：
循环列表，每次遍历以图片的形式展示，与地址绑定：
循环加载图片，pagination后面加一句loop:true：

这样就实现了轮播图预期的效果：

6. 线上线下同步
git add .
git commit -m change
git push
把这个分支上的内容合并掉master分支上：
git checkout master 先切换到master分支上
git merge origin/index-swiper 然后合并
git push