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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
让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
使用Apache的rewrite技术
2006/06/22 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
JavaScript实现多个物体同时运动
2020/03/12 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python日期操作学习笔记
2008/10/07 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
项目管理计划书
2014/01/09 职场文书
参赛口号
2014/06/16 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
python字典的元素访问实例详解
2021/07/21 Python
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
Python进程间的通信之语法学习
2022/04/11 Python