vue2实现可复用的轮播图carousel组件详解
本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下
1、千年老规矩,上效果图,说明功能:
(1) 实现定时器,鼠标未移上图片时,自动轮播切换
(2) 有左右切换按钮,可切换至上一张、下一张
(3)有底部小图标,可自由切换至任意一张
github参考地址:https://github.com/chuanzaizai/vue_carousel
2、组件设计思路:
(1)由于是可复用的子组件,图片的宽高、定时器间隔时间、轮播图list应由父组件传入
(2)定义子组件自身变量,由于我这里为了简化步骤,所以轮播图list就暂时就定义为一个常量
同时定义了pos默认展示的图片数组下标,后面的计算属性会很有用
定时器变量
(3) 接着是比较关键的一些步骤:
a、为图片绑定的:src的计算属性
b、底部的小按钮应该动态生成,并且它的active样式应该依托于pos动态切换
c、上一张、下一张、定时器切换时就是++或者--pos,同时在两个临界值0和defaultList.length-1是判断就可以
d、由于下部小图标为动态生成、宽高不定,但是都应水平居中:
可采用flex布局,或者js调整样式
3、说明一下这样设计的原因
(1)子组件的复用性不言而喻,可定义宽高、定时器切换时间
(2)比较重要的一点:
a、组件加载过程中,如果轮播图数量过多,假如有10张,按照传统加载模式,就初始化一次性加载,再自行切换,这对页面的性能是很大的挑战
b、在以上组件的设计中,用为将pos定义为0,初始化只会加载一张图片,定时器切换或者用户手动切换才会其余图片,这对用户体验是很大的改善
4、代码已上传至github,喜欢的小伙伴可以点个赞!!!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- [Go语言]从Docker源码学习Go——指针和Structs - lemon_bar
- Git 项目推荐 | Go 语言读写 INI 文件工具包
- 初识Python (r10笔记第52天)
- 挑战数据结构与算法面试题——统计上排数在下排出现的次数
- Go语言的 10 个实用技术--转
- MySQL反连接的优化总结(r10笔记第51天)
- python基础知识——内置数据结构(列表)
- 【Go 语言社区】Go语言Slice去重
- 【Go 语言社区】Golang 语言再谈接口
- 【Go 语言社区】Golang 语言再谈常量
- 【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- MySQL Profile在5.7的简单测试(r10笔记第50天)
- 【Go 语言社区】Golang中interface判断nil问题
- 有趣的rownum测试(r10笔记第49天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法