@Author:Runsen
@Date:/10/22
写在前面:我是「Runsen」,热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端,需要每天的日积月累, 每天都要加油!!!
今天将完成Vue项目去哪儿网App首页轮播图,下面是在本次慕课网完成Vue项目去哪儿网App首页轮播图的总结和感受。
熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播。
文章目录
创建分支安装Swiper在Home.vue导入Swiper组件Swiper.vue遇到Bug学习前,先把官方文档列出来:/
对于的Github文档:/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: '/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'}, {id: '0002',imgUrl: '/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'}]}}}</script><style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25%background: #eee.swiper-imgwidth: 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 从零基础入门到实战项目开发