2020/10/23、 周五、今天又是奋斗的一天。
@Author：Runsen @Date：2020/10/22
写在前面：我是「Runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
今天将完成Vue项目去哪儿网App首页轮播图，下面是在本次慕课网完成Vue项目去哪儿网App首页轮播图的总结和感受。
熟悉的图片轮播，只要是个网站，百分之90以上会有个图片轮播。
文章目录
创建分支安装Swiper在Home.vue导入Swiper组件Swiper.vue遇到Bug
学习前，先把官方文档列出来：https://www.swiper.com.cn/
对于的Github文档：https://github.com/surmon-china/vue-awesome-swiper
创建分支
在码云项目中，创建一个新的分支。
然后通过git pull和git checkout index-swipper进行轮播图功能的开发。
安装Swiper
swiper是一个相当强大的图片展示插件，下面我来介绍一下swiper的简单图片轮播功能。
Swiper提供了比较旧的版本，这里选用2.6.7
npm install swiper vue-awesome-swiper@2.6.7 --save
安装成功后，在main.js引入swiper。
注意引用的CSS的路径，官网是最新的版本，而我们这里使用的是2.6.4
在Home.vue导入Swiper组件
Swiper.vue
<template
>
<!-- 在swiper外面定义一个div是为了解决网速慢得抖动的BUG --
>
<div class
="wrapper">
<swiper :options
="swiperOption">
<!-- vue的列表渲染，key --
>
<swiper-slide v-for
="item of swiperList" :key
="item.id">
<img class
="swiper-img" :src
="item.imgUrl" /
>
</swiper-slide
>
<div class
="swiper-pagination" slot
="pagination"></div
>
</swiper
>
</div
>
</template
>
<script
>
export default
{
name:
'HomeSwiper',
// ES6data后面要有空格
data
() {
return {
swiperOption:
{
// pagination属性的指是class为swiper-pagination，设置才出现小圆点
pagination:
'.swiper-pagination',
// 定义loop表示可以循环输出
loop:
true
},
swiperList:
[{
id:
'0001',
imgUrl:
'http://img1.qunarzz.com/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'
},
{
id:
'0002',
imgUrl:
'http://img1.qunarzz.com/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'
}]
}
}
}
</script
>
<style lang
="stylus" scoped
>
.wrapper
>>> .swiper-pagination-bullet-active
background:
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25%
background:
.swiper-img
width: 100%
</style
>
遇到Bug
报错：expected “indent”, got “eos”
在写vue项目时stylus代码报错，这样的错误是因为混用空格和tab键造成的。
解决方案: 直接格式化代码
Unchecked runtime.lastError: The message port closed before a response was
这是因为装有了插件的原因。因此无需关注。
参考课程：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
请一键三连！！！！！
刘润森！
认证博客专家
Python
Java
前端
17年就读于东莞XX学院化学工程与工艺专业，GitChat作者。Runsen的微信公众号是"Python之王"，因为Python入了IT的坑，从此不能自拔。公众号内容涉及Python，Java计算机、杂谈。干货与情怀同在。喜欢的微信搜索：「Python之王」。个人微信号：RunsenLiu。不关注我公号一律拉黑！！！
