用 React+ts 实现无缝滚动的走马灯

2023-11-21 12:10

本文主要是介绍用 React+ts 实现无缝滚动的走马灯,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、走马灯的作用

走马灯是一种常见的网页交互组件,可以展示多张图片或者内容,通过自动播放或者手动切换的方式,让用户能够方便地浏览多张图片或者内容。
本次实现的不是轮播图而是像传送带一样的无限滚动的形式。

二、需求梳理

走马灯可设置一下属性:

  • 滚动速度
  • 滚动方向
  • 一屏要显示项的个数
  • 容器的宽度
  • 要展示的数据
  • 自定义展示项

1691745987770-30b3877e-d08e-433d-b670-b37ad66bc069.gif

三、实现思路

3.1 首先确定一下我们的dom元素

wrap>list>item*n

  • 最外层wrap用于限制显示区域的宽度,超过宽度就隐藏。
  • list 用于滚动显示数据,所以我们的动画加在这个元素上。
  • item 用于放置展示项。

3.2 实现无限滚动的动画

我们用keyframes关键帧动画来做。
但是要滚动多少距离才能实现无限滚动呢?

1.计算动画滚动距离

1691747412524-776d33fb-2379-404a-846d-bf82d6b5b59c.jpeg
从上面的图中我们可以看到当list的宽度<wrap的宽度(containerWidth)时,会出现滚动后出现空白的情况。那么第二张图,list的宽度>=wrap的两倍,就能在向左滚动完list的一半后,不会出现空白,而且为了给人一种无限滚动的效果,list的前后两部分数据要保持一致。
所以滚动的距离 = 展示数据的个数 * 每项的宽度,而为了无限滚动效果,我们还需要对原始数据进行处理。
分为以下几种情况:

  • 数据个数>= 一屏展示个数(showNum)

此时重复两次原始数据就能得到滚动数据

  • 数据个数< 一屏展示个数

首先我们要保证没有空白,那要如何填充呢?只填充到=showNum,行不行呢?
我们可以看一下:
比如说原始数据为[1,2,3],填充完再进行重复则为 [1,2,3,1,1,2,3,1],这样会出现1这一项连续出现了。
所以最好的方式是直接填充原始数据直到>=showNum,所以最终我们得到的滚动数据是[1,2,3,1,2,3 ,1,2,3,1,2,3]

2.插入动画

因为我们的动画是根据传入的变量得来的,所以不能直接写在样式文件里,我们通过在useEffect里插入样式表对象的方式来实现。

四、完整代码

组件代码

import { ReactElement, useEffect } from "react";
import * as React from "react";
import "./index.less";
import { ItemProps } from "./demo";
interface Props {Item: (item: ItemProps) => ReactElement;showNum: number;speed: number;containerWidth: number;data: Array<any>;hoverStop?: boolean;direction?: "left" | "right";
}
const fillArray = (arr: any[], length: number): any[] => {const result: any[] = [];while (result.length < length) {result.push(...arr);}return result.concat(result);
};function AutoplayCarousel({Item,showNum,speed,containerWidth,data,hoverStop = false,direction = "left"
}: Props) {const showData = fillArray(data, showNum);const length = showData.length;const itemWidth = containerWidth / showNum;useEffect(() => {// 创建一个新的样式表对象const style = document.createElement("style");// 定义样式表的内容let start = "0";let end = `-${(itemWidth * length) / 2}`;if (direction === "right") {start = end;end = "0";}style.innerText = `@keyframes templates-partner-moving {0% {transform: translateX(${start}px);}100% {transform: translateX(${end}px);}}`;if (hoverStop) {style.innerText += `.list:hover {/*鼠标经过后,动画暂停*/animation-play-state: paused !important;}`;}// 将样式表插入到文档头部document.head.appendChild(style);// 组件卸载时清除样式表return () => document.head.removeChild(style) as any;}, []);return (<div style={{ width: `${containerWidth}px` }} className="wrap"><divclassName="list"style={{width: `${itemWidth * length}px`,animation: `templates-partner-moving ${(length / showNum / 2) * speed}s infinite linear`}}>{showData.map((item) => (<div style={{ width: `${itemWidth}px` }}><Item {...item} /></div>))}</div></div>);
}export default AutoplayCarousel;

demo代码

import React from "react";
import AutoplayCarousel from "./index";
const data = new Array(5).fill(0).map((item, index) => {return { num: index };
});
console.log("data", data);
export interface ItemProps {num: number;
}
const itemStyle = {border: "1px solid #ccc",background: "#fff",height: "50px",color: "red",marginRight: "15px"
};
function Demo() {const Item = (item: ItemProps) => {return <div style={itemStyle}>{item.num}</div>;};return (<AutoplayCarouselItem={Item}containerWidth={500}showNum={5}speed={8}data={data}/>);
}export default Demo;

样式代码

* {margin: 0;padding: 0;
}.wrap {overflow: hidden;.list {position: relative;top: 0px;left: 0px;height: 100%;display: flex;}
}

这篇关于用 React+ts 实现无缝滚动的走马灯的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/402253

相关文章

Java实现MD5加密的四种方式

《Java实现MD5加密的四种方式》MD5是一种广泛使用的哈希算法,其输出结果是一个128位的二进制数,通常以32位十六进制数的形式表示,MD5的底层实现涉及多个复杂的步骤和算法,本文给大家介绍了Ja... 目录MD5介绍Java 中实现 MD5 加密方式方法一:使用 MessageDigest方法二:使用

mysql删除无用用户的方法实现

《mysql删除无用用户的方法实现》本文主要介绍了mysql删除无用用户的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 1、删除不用的账户(1) 查看当前已存在账户mysql> select user,host,pa

Nginx配置location+rewrite实现隐性域名配置

《Nginx配置location+rewrite实现隐性域名配置》本文主要介绍了Nginx配置location+rewrite实现隐性域名配置,包括基于根目录、条件和反向代理+rewrite配置的隐性... 目录1、配置基于根目录的隐性域名(就是nginx反向代理)2、配置基于条件的隐性域名2.1、基于条件

Linux配置IP地址的三种实现方式

《Linux配置IP地址的三种实现方式》:本文主要介绍Linux配置IP地址的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录环境RedHat9第一种安装 直接配置网卡文件第二种方式 nmcli(Networkmanager command-line

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Mybatis从3.4.0版本到3.5.7版本的迭代方法实现

《Mybatis从3.4.0版本到3.5.7版本的迭代方法实现》本文主要介绍了Mybatis从3.4.0版本到3.5.7版本的迭代方法实现,包括主要的功能增强、不兼容的更改和修复的错误,具有一定的参考... 目录一、3.4.01、主要的功能增强2、selectCursor example3、不兼容的更改二、

如何使用C#串口通讯实现数据的发送和接收

《如何使用C#串口通讯实现数据的发送和接收》本文详细介绍了如何使用C#实现基于串口通讯的数据发送和接收,通过SerialPort类,我们可以轻松实现串口通讯,并结合事件机制实现数据的传递和处理,感兴趣... 目录1. 概述2. 关键技术点2.1 SerialPort类2.2 异步接收数据2.3 数据解析2.

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(