React实现一个简易版Swiper_react spilter

背景

最近在公司内部进行一个引导配置系统的开发中，需要实现一个多图轮播的功能。到这时很多同学会说了，“那你直接用swiper不就好了吗？”。但其实是，因为所有引导的展示都是作为npm依赖的形式来进行插入的，所以我们想要做的就是：尽量减少外部依赖以及包的体积。所以，我们开始了手撸简易版swiper之路。

功能诉求

首先，由于我们所有的内容都是支持配置的，所以首先需要支持停留时间(delay)的可配置；由于不想让用户觉得可配置的内容太多，所以我们决定当停留时间(delay)大于0时，默认开启autoplay。

其次，在常规的自动轮播外，还需要满足设计同学对于分页器(Pagination)的要求，也就是当前的展示内容对应的气泡(bullet)需要是一个进度条的样式，有一个渐进式的动画效果。

最后，由于滑动效果实现起来太麻烦，所以就不做了，其他的基本都是swiper的常规功能了。

由此，整体我们要开发的功能就基本确定，后面就是开始逐步进行实现。

效果展示

整体思路

1、入参与变量定义

由于需要用户自定义配置整体需要展示的图片，并且支持自定义整体的宽高与轮播时间(delay)；同样，我们也应该支持用户自定义轮播的方向(direction)。

综上我们可以定义如下的入参：

{
   
  direction?: 'horizontal' | 'vertical';
  speed?: number;
  width: string;
  height: string;
  urls: string[];
}
1
2
3
4
5
6
7
8

而在整个swiper运行的过程中我们同样是需要一些参数来帮助我们实现不同的基础功能，比如

2、dom结构

从dom结构上来说，swiper的核心逻辑就是，拥有单一的可视区，然后让所有的内容都在可视区内移动、替换，以此来达到轮播的效果实现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDNJoepG-1666843304132)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4532035640784005ae584cd6a86bb4c2~tplv-k3u1fbpfcp-watermark.image?)]

那么如何来实现上的效果呢？这里简单梳理一下html的实现：

// 可见区域容器
<div id="swiper">
  // 轮播的真实内容区，也就是实际可以移动的区域
  <div className="swiper-container" id="swiper-container">
    // 内部节点的渲染
    {urls.map((f: string, index: number) => (
      <div className="slide-node">
        <img src={f} alt="" />
      </div>
    ))}
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

到这里一个简陋的dom结构就出现了。接下来就需要我们为他们补充一些样式。

3、样式(style)

为了减少打包时处理的文件类型，并且以尽可能简单的进行样式开发为目标。所以我们在开发过程中选择了使用styled-components来进行样式的编写，具体使用方式可参考styled-components: Documentation。

首先，我们先来梳理一下对于最外层样式的要求。最基本的肯定是要支持参数配置宽高以及仅在当前区域内可查看。

而真正的代码实现其实很简单：

import styled from "styled-components";
import React, {
    FC } from "react";

const Swiper = styled.div`
  overflow: hidden;
  position: relative;
`;

const Swiper: FC<
  {
   
    direction?: 'horizontal' | 'vertical';
    speed?: number;
    width: string;
    height: string;
    urls: string[];
  }
> = ({
   
  direction = "horizontal",
  speed = 3,
  width = ""<
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22