六十六、实现vue项目尊龙游戏旗舰厅尊龙游戏旗舰厅官网首页轮播图（vue-尊龙游戏旗舰厅官网

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提供了比较旧的版本，这里选用2.6.7

npm install swiper vue-awesome-swiper@2.6.7 --save

安装成功后，在main.js引入swiper。

注意引用的css的路径，尊龙游戏旗舰厅官网是最新的版本，而我们这里使用的是2.6.4

<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-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25�ckground: #eee.swiper-imgwidth: 100% </style>

报错：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 从零基础入门到实战项目开发

请一键三连！！！！！

总结

以上是尊龙游戏旗舰厅官网为你收集整理的六十六、实现vue项目尊龙游戏旗舰厅尊龙游戏旗舰厅官网首页轮播图（vue-awesome-swiper）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。