date
Apr 27, 2023 02:36 AM
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM
icon
password
前言
起初我是要编写一个画布的组件功能的。考虑到目前我的项目代码有vue2,vue3,本人还在学习React。所以我想编写一个可以不受框架限制的组件。正好借着这个机会学习一下面相对象开发组件。
分析组件需求
这一步要明确组件需要哪些基本功能。首先从使用方面来说,只需要满足指定的dom就行,然后就是满足基本的轮播图功能。那么使用场景和需求确定了。下面就初步构想下组件的功能了。
- 使用一个Swiper类来编写,这样就可以在new的时候传入已经存在的dom结构,来生成组件
- dom结构我参考了知名开源项目Swiper的结构。
下面之后的想法是在项目开发过程中改进的。
- 外部传入参数来控制自动轮播图或者轮播图的切换事件
- 添加了新的轮播图或者轮播图切换的时候对外部进行通知
开始之前: SwiperOptions
在开始创建我们的
Swiper
类之前,首先需要设定一个名为 SwiperOptions
的预定义接口。这个接口收纳了我们的轮播器中需要的配置,包括是否启动自动播放 (autoplay
)、播放间隔 (delay
)、是否显示分页指示器 (pagination
),及用户交互行为的启用 (enablePlay
和 enablePagination
)。我们同样还定义了两个回调函数,onSlideAdded
和 onSlideChanged
,以便有新图片添加或者当前图片更换时触发。核心功能: Swiper
类
接下来就是我们的主角,
Swiper
类。它需要接收一个HTML元素(或其选择器),以及我们刚才定义的 SwiperOptions
接口作为构造函数的参数。在这个类中,我们会获取并设置图片容器,轮播元素,以及其他相关参数。我们的轮播器中提供了三个关键的方法在进行图片切换操作:
slideToNext
,slideToPrev
和 slideTo
,这三个方法分别用于切换到下一张、上一张或指定索引的图片。并且与一个数据 currentSlideIndex
携手工作,准确地记住和展示当前的图片。动态添加和删除
为了允许图片的动态增删,我们采用了
MutationObserver
来监视DOM的变化。在新的图片添加或移除时,相应的方法 handleSlideAdded
和 handleSlideDeleted
会被调用,这样就能动态地刷新轮播器的状态,并触发对应的轮播器事件。自动播放与悬停停止
此外,我们的轮播器还具备自动播放的特性。在配置中讲
enablePlay
和 autoplay
设为 true
,并指定合适的 delay
延迟时长,轮播器就会自动切换图片了。为了用户体验,当鼠标指针移动到轮播器上时,自动播放会被暂停,鼠标离开又会恢复。个性化定制
最后,为了做到个性化定制,我们可以提供更多的自定义配置选项,通过直接调整
SwiperOptions
接口或者继承并扩展Swiper类中的方法来实现。详细代码
结语
这只是一个菜鸟的开发学习过程,如果有更好的改进代码的方法,希望各位大佬不要惜言。