【JS】用React实现上下跑马灯

  • H5W3
  • 2021-02-08 11:57:08

用React实现上下跑马灯

时倾发布于 今天 08:20

基本思想：

  1. 利用transform：translateY()实现上下滑动，transition控制滑动时间，

  2. 把原数组拼接0下标的数据用于展示，当滑动到最后一个，马上定位到第一个。（最后一个与第一个相同）

代码示例：

// index.jsx
import React, { useRef, useState } from 'react';
import { useInterval } from 'ahooks';
import './style.scss';
function Marquee() {
const marqueeRef = useRef(null);
const content = [
'鸣谢生命有你参与，笑纳我的邀请',
'青春兵荒马乱，我们潦草地离散',
'我对你付出的青春 这么多年',
'我的心事，蒸发成云，再下场雨却舍不得淋湿你',
];
useInterval(() => {
if (!marqueeRef || !marqueeRef.current) return;
const { height } = marqueeRef.current.getBoundingClientRect();
const translateYItem = Math.floor(height / (content.length + 1));
const nextIndex = index + 1;
marqueeRef.current.style.transform = `translateY(-${
translateYItem * nextIndex
}px)`;
marqueeRef.current.style.transition = 'transform 1s';
if (index >= content.length - 1) {
// 最后一个
setTimeout(() => {
setIndex(0);
marqueeRef.current.style.transform = 'translateY(0px)';
marqueeRef.current.style.transition = 'transform 0s';
}, 1000);
} else {
setIndex(nextIndex);
}
}, 2000);
return (
<div className="marquee-container">
<div className="marquee-wrapper">
<div className="marquee-content" ref={marqueeRef}>
{
content.concat(content[0]).map((itm, i) => (
<div key={`${itm}-${i}`} className="marquee-content-itm">
{itm}
</div>
))
}
</div>
</div>
</div>
);
}

// style.scss
.marquee-container {
width: 100%;
.marquee-wrapper {
height: 17px;
overflow: hidden;
.marquee-content {
transform: translateY(0);
transition: transform 1s;
display: flex;
flex-direction: column;
align-items: flex-start;
.marquee-content-itm {
line-height: 17px;
font-size: 12px;
color: #5e1400;
}
}
}
}

javascript前端

阅读 67发布于 今天 08:20

本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

avatar

时倾

把梦想放在心中

185 声望

1.4k 粉丝

0 条评论

得票时间

avatar

时倾

把梦想放在心中

185 声望

1.4k 粉丝

宣传栏

目录

基本思想：

  1. 利用transform：translateY()实现上下滑动，transition控制滑动时间，

  2. 把原数组拼接0下标的数据用于展示，当滑动到最后一个，马上定位到第一个。（最后一个与第一个相同）

代码示例：

// index.jsx
import React, { useRef, useState } from 'react';
import { useInterval } from 'ahooks';
import './style.scss';
function Marquee() {
const marqueeRef = useRef(null);
const content = [
'鸣谢生命有你参与，笑纳我的邀请',
'青春兵荒马乱，我们潦草地离散',
'我对你付出的青春 这么多年',
'我的心事，蒸发成云，再下场雨却舍不得淋湿你',
];
useInterval(() => {
if (!marqueeRef || !marqueeRef.current) return;
const { height } = marqueeRef.current.getBoundingClientRect();
const translateYItem = Math.floor(height / (content.length + 1));
const nextIndex = index + 1;
marqueeRef.current.style.transform = `translateY(-${
translateYItem * nextIndex
}px)`;
marqueeRef.current.style.transition = 'transform 1s';
if (index >= content.length - 1) {
// 最后一个
setTimeout(() => {
setIndex(0);
marqueeRef.current.style.transform = 'translateY(0px)';
marqueeRef.current.style.transition = 'transform 0s';
}, 1000);
} else {
setIndex(nextIndex);
}
}, 2000);
return (
<div className="marquee-container">
<div className="marquee-wrapper">
<div className="marquee-content" ref={marqueeRef}>
{
content.concat(content[0]).map((itm, i) => (
<div key={`${itm}-${i}`} className="marquee-content-itm">
{itm}
</div>
))
}
</div>
</div>
</div>
);
}

// style.scss
.marquee-container {
width: 100%;
.marquee-wrapper {
height: 17px;
overflow: hidden;
.marquee-content {
transform: translateY(0);
transition: transform 1s;
display: flex;
flex-direction: column;
align-items: flex-start;
.marquee-content-itm {
line-height: 17px;
font-size: 12px;
color: #5e1400;
}
}
}
}

以上是 【JS】用React实现上下跑马灯 的全部内容， 来源链接： www.h5w3.com/114187.html

回到顶部