react+swiper实现pc端无缝滚动

最新推荐文章于 2025-06-19 09:57:21 发布

原创最新推荐文章于 2025-06-19 09:57:21 发布 · 718 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

本文介绍如何使用Swiper实现列表的无缝滚动效果，并提供了一个基于React的实例代码。该示例通过Swiper组件展示了带有自动播放功能的垂直滚动表格。

使用swiper实现无缝滚动，代码没有做封装。可以根据自己的需求进行改动.

css样式


 .container{
  background: rgba(22, 63, 124);
  backdrop-filter: blur(5px);
  .swiper{
    .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      /*之前是ease-out*/
      -moz-transition-timing-function: linear !important;
      -ms-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
      margin: 0 auto !important;
    }
    .swiper-slide :hover{
      background-color: #f00;
    }
  }
  .table{
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
  }
}

index文件

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade, Autoplay } from "swiper";
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/effect-fade';
import './style.less'

const ScrollTable = (props) => {
  // const { columns=[], data=[] } = props
  const columns = [
    {
      text: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '50px'
    },
    {
      text: '年龄',
      dataIndex: 'age',
      key: 'age',
      // width: '100px'
    },
    {
      text: '性别',
      dataIndex: 'sex',
      key: 'sex',
      // width: '100px'
    },
  ]
  const data = [
    {name: '1', age: '1', sex: '男'},{name: '2', age: '2', sex: '女'},{name: '3', age: '3', sex: '男'},
    {name: '4', age: '4', sex: '女'},{name: '5', age: '5', sex: '女'},{name: '6', age: '6', sex: '男'}
  ]
  return (
    <div className="container" style={{ width: '300px' }}>
      {/* 生成表头 */}
      <div className="table">
        {
          columns.map(column => {
            return (
              <div key={column.key} style={column.width ? { width: column.width, flex: ''} : {flex: 1}}>{column.text}</div>
            )
          })
        }
      </div>
      {/* 滚动列表 */}
      <Swiper
        // 每项间隔
        spaceBetween={0}
        // 一页显示多少
        slidesPerView={5}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}
        // 方向
        direction='vertical'
        // 引入模块
        modules={[EffectFade, Autoplay]}
        // 自动播放间隔
        autoplay={{
          delay: 0,
          disableOnInteraction: false,
          pauseOnMouseEnter: true
        }}
        // 播放速度
        speed={2000}
        // 是否循环
        loop
        observer
        observeParents
        autoHeight
        style={{ height: '200px' }}
      >
       { 
          data.map(item => {
              return (
                <SwiperSlide key={item.name}>
                  <div className="table">
                    {
                      columns.map(column => {
                        return (
                          <div key={item.name} style={column.width ? { width: column.width} : {flex: 1}}>
                            {item[column.dataIndex]}
                          </div>
                        )
                      })
                    }
                  </div>
                </SwiperSlide>
              )
            })
        }
      </Swiper>
    </div>
  )
}
export default ScrollTable