下面要来写,首页的轮播图组件了。
因为是新功能,因此,要在码云上新建一个分支。如下。
线下,我们要pull 以下,将分支拉到本地。
只需要,进入项目目录。使用命令 git pull . 如下,即把index-swiper 分支拉到本地了。
转换当前分支,命令 : git checkout index-swiper 即可。
下面,进行开发了。
启动服务,npm run start .
然后,下载一个轮播图插件,vue-awesome-swiper . 去GitHub 上,找到它.
在 github 这个插件的readme 中,显示,下载:
这儿,我们下载之前的版本,官网也给出了 2.6.7 版本的信息。
使用命名 npm install [email protected] --save 即可。
下载完成后。可以启动项目的服务了,然后就是引入这个插件。
因为很多页面都要用到,因此我们全局引入这个插件。
好了,下面就可以使用这个插件了。
首先,我们在pages/components 下创建一个文件 Swiper.vue
GitHub 上也给出了如何使用
下面,在swiper.vue 中使用
下一步,在home.vue 中使用这个组件。
下面给这个插件,添加图片。
以上,似乎就好了,并没有。因为并没有指定轮播图的高度,因此在网速较慢时,网页显示可能会有一个竖直上的抖动(加载完轮播图后,的撑开效果)。以下,解决了这个问题。
然后,配置下,显示轮播图的白色小点。
样式的穿透,由于scoped , 插件内的样式,emmm 不太清楚... 方法是使用“>>>” 样式的穿透 使得 swiperdiv 类 下的所有 长名字的哪个类,样式都发生改变。
下面,改进一下。
最后,提交代码。
合并分支。
git push 之后。
git checkout master
git merge origin/index-swiper (将线上index-swiper 分支合并到本地当前master 分支)
git push (提交master 分支)
效果: