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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
YII实现分页的方法
2014/07/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
js 颜色选择插件
2017/01/23 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
python中的多线程实例教程
2014/08/27 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
自荐信包含哪些内容
2013/10/30 职场文书
生物工程专业求职信
2014/09/03 职场文书
技术员个人工作总结
2015/03/03 职场文书
养成教育主题班会
2015/08/13 职场文书
小学中队委竞选稿
2015/11/20 职场文书
2016高考寄语集锦
2015/12/04 职场文书
员工工作心得体会
2019/05/07 职场文书
python实现会员信息管理系统(List)
2022/03/18 Python