六十六、实现Vue项目首页轮播图(vue-awesome-swiper)
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-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 从零基础入门到实战项目开发
请一键三连!!!!! |
六十六、实现Vue项目首页轮播图(vue-awesome-swiper)相关推荐
- 微服务项目实战技术点汇总:“尚硅谷的谷粒在线教育”七、redis数据库缓存页面数据、使用NUXT框架搭建前台系统环境、前台系统页面、首页轮播图(banner数据显示)、首页热门课程,名师推荐
文章目录 一.NUXT前台环境搭建 1.如何学习NUXT 2.下载安装使用NUXT入门模板starter-template 3.机制 二.编写静态页面 1.设置布局(首尾固定,中间用nuxt引用组件) ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- 路飞学城项目之首页轮播图定时更新、课程页面前端及课程表分析
文章目录 1.首页轮播图定时更新(使用celery) 2.课程页面前端 3.课程表分析 3.1.课程表相关模型(实战课为例) 3.2.课程表数据录入 3.3.课程分类接口 3.3.课程分类前端展示(对 ...
- 实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录 概述 index.html index.js index.css Controller 调测 修复问题 头条图片展示修复 一级类别商铺图片展示修复 Github地址 概述 在完成了后端 实战 ...
- 基于Redis优化首页轮播图查询
@ApiOperation(value = "获取首页轮播图列表", notes = "获取首页轮播图列表", httpMethod = "GET&q ...
- (转)淘淘商城系列——首页轮播图展示
http://blog.csdn.net/yerenyuan_pku/article/details/72848306 上文我们一起学习了内容管理,由于时间太紧了,好多功能都没实现,在此对读者说声抱歉 ...
- UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息
UI交互设计 一."新建" 常见的颜色模式: 颜色模式,是将某种颜色表现为数字形式的模型,或者说是一种记录图像颜色的方式.分为:RGB模式.CMYK模式.HSB模式.Lab颜色模式 ...
- 2.学城项目 头部底部组件首页轮播图
1. 下载框架/组件/库 * 1. 下载项目中需要使用的框架个组件. 1. axion 网络请求的第三方框架 (之前测试前后端通信已经安装过了) cnpm install axios -S 2. vu ...
- Android自定义控件之应用程序首页轮播图
http://blog.csdn.net/android_jiangjun/article/details/39638129 现在基本上大多数的Android应用程序的首页都有轮播图,就是像下图这样的 ...
最新文章
- 如何使用TensorFlow中的Dataset API
- 百度前离职员工偶遇同门百度人,轻松通过面试,直呼放水很明显!这样真的好么?...
- 使用kubeadm 安装 kuberntes 1.13.3
- ssh客户端_一款基于TAS框架的SSH客户端蠕虫
- 浅谈C/C+内存管理、内存泄漏、堆栈
- Java学习笔记——JDBC之与数据库MySQL的连接以及增删改查等操作
- TensorRT同时加载多个模型很容易崩溃
- 软件项目管理的基本概念
- 实验四 木马的远程控制和清除
- 中国农村统计年鉴合集(1985-2019年)
- Unity3D制作塔防类游戏
- hive动态分区 MapReduce 虚拟内存不足
- 介绍5款非常棒的移动自动化测试工具
- 《网络媒体教程》自序
- 用BVP一比一还原自如客APP裸眼3D效果(Android原生)
- WOW外挂编写教程---进阶版
- 【Rust精彩blog】Rust 中几个智能指针的异同与使用场景
- 【REACT-受控组件和非受控组件】
- 推荐几个 Go 圈子的高质量肝帝
- 第031讲:永久存储:腌制一缸美味的泡菜
热门文章
- OS / linux / 互斥锁实现原理(futex)
- 本地编译和交叉编译的区别
- 小明分享|sigmstar SSD201/SSD202 针对RGB的LCD屏配置操作说明分享
- 百度地图与所托瑞安达成深度合作 共同推进商用车安全智能驾驶领域创新
- 小米真蓝牙耳机说明书_媲美AirPods?小米真无线蓝牙耳机Air 2开箱
- react state成员
- linux top命令VIRT,RES,SHR,DATA的含义
- arm-none-linux-gnueabi,arm-none-eabi 与arm-eabi 区别 及 arm-none-linux-gnueabi安装
- QQ空间相册展示特效
- java取主机的网卡物理地址