两行弹幕动态轮播

import React, { memo, useEffect, useState } from 'react';
import 'swiper/dist/css/swiper.min.css';

interface DanmuProps {
  danMuList: any[];
}

const DanMuFloatUp = memo((props: DanmuProps) => {
  const { danMuList } = props;
  const [currSlider, setCurrSlider] = useState(0);

  useEffect(() => {
    import('swiper').then(Swiper => {
      Swiper.default('#test', {
        slidesPerView: 2,
        direction: 'vertical',
        autoplay: 2000,
        spaceBetween: 10,
        loop: true,
        onSlideChangeStart(e: any) {
          console.log('过渡结束', e.activeIndex, e.realIndex);
          setCurrSlider(e.realIndex);
        },
      });
    });
  }, []);

  const swpierContainer = () => (
    <div id="test" className="swiper-container">
      <style jsx>
        {`
          .swiper-container {
            width: 100%;
            height: 150px;
          }

          .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #aaa;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
          }
        `}
      </style>
      <div className="swiper-wrapper">
        {danMuList.map((item, index) => (
          <div
            key={JSON.stringify(item) + index}
            style={{
              transform:
                currSlider === index ? 'scale3d(1.2,1.2,1)' : 'scale3d(1,1,1)',
            }}
            className="swiper-slide">
            {item.name} {index}
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );

  return <>{swpierContainer()}</>;
});

export default DanMuFloatUp;

数据格式

const danmulist = [
  { name: 'ceshhi', text: 'zheshihneironng' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
  { name: '姓名', text: '叫啥叫啥叫啥' },
];