大屏轮播table

项目场景：

大屏中轮播的table，记录组件

---

安装依赖 pnpm add swiper@6

import React, { useMemo } from 'react'
import SwiperCore, { Scrollbar, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.css'
import 'swiper/swiper.scss'
import 'swiper/components/pagination/pagination.scss'
import classNames from 'classnames'
import styles from './index.module.scss'

// 使用哪些插件都需要单独引入
SwiperCore.use([Scrollbar, Autoplay])

export default function index({
  textColor = '#FFFFFF',
  rowClick,
  bgImage,
  tableItemBg = 3
}) {
  /*
   * bgImage 背景
   * tableItemBg item项的背景
   *  rowClick 行点击事件
   */

  const columns = [
    {
      name: '采集时间',
      key: 'zzlx',
      width: 25,
      align: 'center'
      /* render: (item, record, index) => {
        return <span title={item.caiJiShiJian}>{item.caiJiShiJian}</span>;
      }, */
    },
    {
      name: '采集时间2222222222222222222222222222222222222',
      key: 'zzly',
      width: 25,
      align: 'center'
    },
    {
      name: '2222',
      key: 'pysj',
      width: 25,
      align: 'center'
    }
  ]

  const slideConfig = useMemo(() => {
    return {
      tag: 'section',
      wrapperTag: 'ul',
      // spaceBetween: 50, // 两个slide的间距
      slidesPerView: 1,
      loop: true,
      speed: 2000,
      // effect: 'coverflow', // 动画效果
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },

      pagination: { clickable: true }
      // scrollbar:{ draggable: true },
      /* onSwiper: (swiper) => console.log(swiper),
      onSlideChange: () => console.log('slide change') */
    }
  }, [])

  const width = useMemo(() => {
    return 100 / columns.length
  }, [columns])

  const data = [
    { zzlx: '浙贝母', zzly: '江南药镇协会', pysj: '2023-07-02', zzdj: '特优' },
    { zzlx: '元胡', zzly: '江南药镇协会', pysj: '2023-07-02', zzdj: '特优' },
    { zzlx: '杭白菊', zzly: '浙农杭白菊协会', pysj: '2023-04-13', zzdj: '特优' }
  ]

  return (
    <div className={styles.tableBox}>
      <div className={classNames(styles['table-header'])}>
        {columns &&
          columns.map((item, index) => {
            return (
              <div
                style={{ width: (item.width || width) + '%' }}
                key={index}
                className={styles['table-header-item']}
                title={item.name}
              >
                {item.name}
              </div>
            )
          })}
      </div>
      <Swiper
        direction='vertical'
        slidesPerView={4}
        initialSlide={0}
        loop={false}
        // pagination={{ clickable: true }} //开启分页器操作
        // observer={true} //修改swiper自己或子元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
        // observeParents={true} //修改swiper的父元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
        autoplay={true}
      >
        {data &&
          data.map((item, index) => {
            return (
              <SwiperSlide
                key={index}
                className={classNames(
                  tableItemBg === 1
                    ? styles['swiper-wrap']
                    : tableItemBg === 2
                    ? [styles['swiper-wrap'], styles['bgLine']]
                    : [styles['swiper-wrap'], styles['bgColor']]
                )}
                style={
                  bgImage
                    ? {
                        backgroundImage: `url(${bgImage})`,
                        backgroundSize: '100% 100%'
                      }
                    : {}
                }
                onClick={() => (rowClick && rowClick(item)) || null}
              >
                {columns &&
                  columns.map((it, idx) => {
                    return (
                      <div
                        key={idx}
                        className={styles['table-item']}
                        style={{
                          width: (it.width || width) + '%',
                          textAlign: it.align || 'left',
                          color: textColor
                        }}
                        onClick={() => (it.click && it.click(item)) || null}
                        title={item[it?.key]}
                      >
                        {it.render ? it.render(item, data, idx) : item[it?.key]}
                      </div>
                    )
                  })}
              </SwiperSlide>
            )
          })}
      </Swiper>
    </div>
  )
}

.tableBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 14px;
  .table-header {
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    background-color: rgba(4, 35, 105, 0.7);
  }
  > div {
    &:nth-child(2) {
      cursor: grab;
      height: calc(100% - 32px);
    }
  }
  .table-header-item {
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    height: 100%;
    font-family: Source Han Sans CN;
    color: #91d1fe;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
  .swiper-wrap {
    display: flex;
    border-radius: 4px;
    box-sizing: border-box;
    height: 32px !important;
    align-items: center; 
    .table-item {
      padding: 0 5px;
      box-sizing: border-box;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .bgLine {
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  .bgColor { 
    box-sizing: border-box;
    margin-top: 4px !important;
    background-color: rgba(4, 35, 105, 0.7);
  }
}

---