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

这篇具有很好参考价值的文章主要介绍了用 React+ts 实现无缝滚动的走马灯。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、走马灯的作用

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

二、需求梳理

走马灯可设置一下属性:

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

用 React+ts 实现无缝滚动的走马灯,react,react.js,前端

三、实现思路

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

wrap>list>item*n

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

3.2 实现无限滚动的动画

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

1.计算动画滚动距离

用 React+ts 实现无缝滚动的走马灯,react,react.js,前端
从上面的图中我们可以看到当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">
      <div
        className="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 (
    <AutoplayCarousel
      Item={Item}
      containerWidth={500}
      showNum={5}
      speed={8}
      data={data}
    />
  );
}

export default Demo;

样式代码文章来源地址https://www.toymoban.com/news/detail-649421.html

* {
	margin: 0;
	padding: 0;
}

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

到了这里,关于用 React+ts 实现无缝滚动的走马灯的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI 走马灯的使用

    目录 走马灯是什么 原生js实现 Element UI的走马灯使用 el-carousel Carousel Events el-carousel-item 在有限空间内,循环播放同一类型的图片、文字等内容,走马灯也叫轮播图。 比如   JS实现轮播图效果(同时播放音频)_trigger333的博客-CSDN博客 Element - The world\\\'s most popular Vue UI framework 代

    2024年02月02日
    浏览(50)
  • elementUI 轮播图 ----Carousel 走马灯笔记

    2024年02月05日
    浏览(134)
  • ElementUI浅尝辄止14:Carousel 走马灯

    在有限空间内,循环播放同一类型的图片、文字等内容 结合使用 el-carousel 和 el-carousel-item 标签就得到了一个走马灯。幻灯片的内容是任意的,需要放在 el-carousel-item 标签中。默认情况下,在鼠标 hover 时底部的指示器时就会触发切换。通过设置 trigger 属性为 click ,可以达到点

    2024年02月10日
    浏览(48)
  • element-ui走马灯使用心得

    解决办法:复制一份单独处理[1,2,1,2] 代码: 解决办法:每次更新数据使用 key 来重置dom   div class=\\\"list-main\\\" :key=\\\"carouselUpdate\\\" /div getdata() {          this.carouselUpdate+=1; }         解决办法:清除原本的鼠标移入事件  @mouseenter.native=\\\"delHandleMouseEnter(index)\\\" // 鼠标移入卡片b

    2023年04月10日
    浏览(40)
  • element-plus走马灯不显示

    依赖正确,代码用法正确,但是element-plu走马灯就是不显示!! 并且盒子的宽度总是0 在现有的布局中插入官方的案例,也不能显示 但是把整个页面都使用官方案例就可以正常显示 所以,怀疑时自己的样式冲突了 就content一个盒子,看到 display: flex; 就知道不对劲,去掉flex布

    2024年02月07日
    浏览(39)
  • 自定义element-ui走马灯(轮播)样式

    自定义el-carousel-item指示器样式 把指示器变成圆点 效果图:  

    2024年02月13日
    浏览(40)
  • Element-ui的Carousel走马灯组件动态渲染高度

    在前端 vue 项目开发中经常会用到走马灯的场景,然而在采用Element-ui的情况下, el-carousel 走马灯组件有一个默认的固定高度 300px 。如下所示: 这样会导致网页的全屏的 banner 被压缩或拉伸,变形十分难看,在一个认真的切图仔眼里是无法容忍的。然而业务方在使用的时候没

    2024年02月03日
    浏览(48)
  • (Carousel)解决:Element-ui 中 Carousel 走马灯的样式的修改问题

    1、 Element-ui 提供组件情况: 其一、 Element-ui 自提供的代码情况为(示例的代码,例子如下): 代码地址: https://element.eleme.cn/#/zh-CN/component/carousel 其二、页面的显示情况为: 1、 Carousel 自提供的代码的实践: 其一、代码为: 其二、页面展示为: 2、 Carousel 代码相关属性的使用

    2024年01月25日
    浏览(52)
  • 制作轮播图经验分享——element ui走马灯的使用(附源码,效果截图)

    先附上效果图:   element ui链接地址:Carousel 走马灯 | Element Plus (gitee.io) 源码: 这里我使用的是静态图片(本地) 经验分享: 在制作轮播图的时候经常会发现图片大小不一,这时候可以在img标签里加上width:100%;height:100%即可实现图片铺满。 当然,这只是轮播图的一种,还

    2024年02月11日
    浏览(40)
  • Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常

    当走马灯只有两项时 ,第一次切换时动画效果是右滑,第二次切换时变成了左滑 就变成了左右左右来回切换而不是一个方向无限循环 解决办法 当数据只有两项时 复制一遍数据 ,比如1,2 ==1,2,1,2 自定义指示器,在只有两项时显示自定义的指示器,同时,监听自定义指示

    2024年02月15日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包