🗒️手写一个简单的Swiper
2023-4-26
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

起初我是要编写一个画布的组件功能的。考虑到目前我的项目代码有vue2,vue3,本人还在学习React。所以我想编写一个可以不受框架限制的组件。正好借着这个机会学习一下面相对象开发组件。

分析组件需求

这一步要明确组件需要哪些基本功能。首先从使用方面来说,只需要满足指定的dom就行,然后就是满足基本的轮播图功能。那么使用场景和需求确定了。下面就初步构想下组件的功能了。
  1. 使用一个Swiper类来编写,这样就可以在new的时候传入已经存在的dom结构,来生成组件
  1. dom结构我参考了知名开源项目Swiper的结构。
    下面之后的想法是在项目开发过程中改进的。
    1. 外部传入参数来控制自动轮播图或者轮播图的切换事件
    1. 添加了新的轮播图或者轮播图切换的时候对外部进行通知

    开始之前: SwiperOptions

    在开始创建我们的 Swiper 类之前,首先需要设定一个名为 SwiperOptions 的预定义接口。这个接口收纳了我们的轮播器中需要的配置,包括是否启动自动播放 (autoplay)、播放间隔 (delay)、是否显示分页指示器 (pagination),及用户交互行为的启用 (enablePlay 和 enablePagination)。我们同样还定义了两个回调函数,onSlideAdded 和 onSlideChanged,以便有新图片添加或者当前图片更换时触发。

    核心功能: Swiper 类

    接下来就是我们的主角,Swiper 类。它需要接收一个HTML元素(或其选择器),以及我们刚才定义的 SwiperOptions 接口作为构造函数的参数。在这个类中,我们会获取并设置图片容器,轮播元素,以及其他相关参数。
    我们的轮播器中提供了三个关键的方法在进行图片切换操作:slideToNextslideToPrev 和 slideTo ,这三个方法分别用于切换到下一张、上一张或指定索引的图片。并且与一个数据 currentSlideIndex 携手工作,准确地记住和展示当前的图片。

    动态添加和删除

    为了允许图片的动态增删,我们采用了 MutationObserver 来监视DOM的变化。在新的图片添加或移除时,相应的方法 handleSlideAdded 和 handleSlideDeleted 会被调用,这样就能动态地刷新轮播器的状态,并触发对应的轮播器事件。

    自动播放与悬停停止

    此外,我们的轮播器还具备自动播放的特性。在配置中讲 enablePlay 和 autoplay 设为 true,并指定合适的 delay 延迟时长,轮播器就会自动切换图片了。为了用户体验,当鼠标指针移动到轮播器上时,自动播放会被暂停,鼠标离开又会恢复。

    个性化定制

    最后,为了做到个性化定制,我们可以提供更多的自定义配置选项,通过直接调整 SwiperOptions 接口或者继承并扩展Swiper类中的方法来实现。

    详细代码

    结语

    这只是一个菜鸟的开发学习过程,如果有更好的改进代码的方法,希望各位大佬不要惜言。
  2. Javascript
  3. Html
  4. Css
  5. ProxmoxVE通过Cloudflare Zero Trust实现内网穿透macOS上修复word/excel等office文件乱码问题
    • Waline
    目录