vue2实现可复用的轮播图carousel组件详解


Posted in Javascript onNovember 27, 2017

本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下

1、千年老规矩,上效果图,说明功能:

(1) 实现定时器,鼠标未移上图片时,自动轮播切换

(2) 有左右切换按钮,可切换至上一张、下一张

(3)有底部小图标,可自由切换至任意一张

vue2实现可复用的轮播图carousel组件详解

github参考地址:https://github.com/chuanzaizai/vue_carousel

2、组件设计思路:

(1)由于是可复用的子组件,图片的宽高、定时器间隔时间、轮播图list应由父组件传入

vue2实现可复用的轮播图carousel组件详解

(2)定义子组件自身变量,由于我这里为了简化步骤,所以轮播图list就暂时就定义为一个常量

同时定义了pos默认展示的图片数组下标,后面的计算属性会很有用

定时器变量

vue2实现可复用的轮播图carousel组件详解

(3) 接着是比较关键的一些步骤:

a、为图片绑定的:src的计算属性

vue2实现可复用的轮播图carousel组件详解

vue2实现可复用的轮播图carousel组件详解

b、底部的小按钮应该动态生成,并且它的active样式应该依托于pos动态切换

vue2实现可复用的轮播图carousel组件详解

c、上一张、下一张、定时器切换时就是++或者--pos,同时在两个临界值0和defaultList.length-1是判断就可以

vue2实现可复用的轮播图carousel组件详解

d、由于下部小图标为动态生成、宽高不定,但是都应水平居中:

可采用flex布局,或者js调整样式

vue2实现可复用的轮播图carousel组件详解

3、说明一下这样设计的原因

(1)子组件的复用性不言而喻,可定义宽高、定时器切换时间

(2)比较重要的一点:

a、组件加载过程中,如果轮播图数量过多,假如有10张,按照传统加载模式,就初始化一次性加载,再自行切换,这对页面的性能是很大的挑战

b、在以上组件的设计中,用为将pos定义为0,初始化只会加载一张图片,定时器切换或者用户手动切换才会其余图片,这对用户体验是很大的改善

4、代码已上传至github,喜欢的小伙伴可以点个赞!!!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
JS实现的自定义map方法示例
May 17 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
You might like
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP 微信支付类 demo
2015/11/30 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
python迭代器的使用方法实例
2013/11/21 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python读写csv文件方法详细总结
2019/07/05 Python
python 命令行传入参数实现解析
2019/08/30 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
法律讲堂观后感
2015/06/11 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js