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的图片轮播 tab切换组件
Jul 19 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
vue一步步实现alert功能
Jul 05 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python微信操控itchat的方法
2019/05/31 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
销售自我评价
2013/10/22 职场文书
模具专业推荐信
2013/10/30 职场文书
军人违纪检讨书
2014/02/04 职场文书
个人近期表现材料
2014/02/11 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
教师党员公开承诺书
2014/03/25 职场文书
儿童生日会策划方案
2014/05/15 职场文书
计算机实训报告范文
2014/11/05 职场文书
护士年终考核评语
2014/12/31 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers