Vue3列表竖向滚动（包含使用swiper的翻页效果）

一、使用element-plus表格进行滚动：

可以满足的需求：表格一行一行竖向滚动，类似走马灯。
不能满足的需求：表格分页竖向滚动，有翻页的效果。

代码：

<template>
	<el-table
      :data="tableData"
      :show-overflow-tooltip="true"
      class="alarmTable"
    >
    <el-table-column
        type="index"
        width="134"
        align="center"
        label="序号">
        <template #default="scope">
          <span class="text">{{(scope.$index+1)+(currentPage-1)*(pageSize)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="left">
        <template #default="scope">
          <span class="name-text">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="金钱" align="center" />
  </el-table>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, nextTick, onUnmounted } from 'vue'

export default defineComponent({
  name: 'rank',
  setup () {
    // 表格的数据类型
    interface tableType {
      name: string;
      money: number;
    }
    const data = reactive({
      tableData: [] as Array<tableType>, // 表格的数据
      currentPage: 1, // 当前展示的页码
      pageSize: 6, // 当前表格一页展示多少条数据
      tableDom: {} as HTMLElement, // 表格内容的dom
    })
    let timeInterval: NodeJS.Timer // 定时器的对象
    let tableScroll = ref(true) // 是否需要滚动

    onMounted(() => {
      // 初始化表格的数据
      list()
      scrollTable()
    })

    onUnmounted(()=> {
      clearInterval(timeInterval)
    })

    // 初始化表格的数据
    const list = () => {
      let arr:Array<tableType> = []
      for(let i = 0; i < 28; i++) {
        let randomData = Math.floor(Math.random() * 100)
        let obj = {
          name: '名称'+randomData,
          money: randomData
        }
        arr.push(obj)
      }
      data.tableData = arr
    }
	
	  // 表格的数据滚动
    const scrollTable = () => {
      nextTick(() => {
        // 获取当前表格内容的dom
        let table = document.getElementsByClassName('alarmTable')[0]
        data.tableDom = (table.getElementsByClassName('el-scrollbar__wrap')[0])! as HTMLElement
        // 鼠标放在表格内容，暂停滚动
        data.tableDom.addEventListener('mouseover', () => {
            tableScroll.value = false
        })
        // 鼠标移出表格内容，继续滚动
        data.tableDom.addEventListener('mouseout', () => {
          tableScroll.value = true
        })
        // 
        timeInterval = setInterval(() => {
            if (tableScroll.value) {
              // 每次内容滚动的距离
              data.tableDom.scrollTop += 1
              if (data.tableDom.clientHeight + data.tableDom.scrollTop == data.tableDom.scrollHeight) {
                data.tableDom.scrollTop = 0
              }
            }
        }, 10)
      })
    }
    
    return {
      ...toRefs(data)
    }
  }
})
</script>
<style lang="scss" scoped>
.alarmTable {
    margin-top: 40px;
    height: 623px;
    overflow: hidden;
    scroll-behavior: smooth;
}
</style>
<style lang="scss">
  .el-table, .el-table::before,
  .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before {
    background: transparent!important;
  }
  .el-table th, .el-table__cell>.cell {
    height: 88px;
    padding: 0;
    font-size: 28px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 88px!important;
  }
  .el-table thead {
    font-size: 28px;
    font-weight: 600;
    color: #fff!important;
  }
  .el-table tr{
    background: transparent!important;
    &:nth-child(2n) {
      background:  rgba(49, 250, 233, 0.1)!important;
    }
  }
  .el-table th.el-table__cell {
    height: 88px;
    padding: 0;
    background:  rgba(237, 250, 49, 0.1)!important;
  }
  .el-table tr:hover>td {
    cursor: pointer;
    background-color: rgba(0,148,255,0.3) !important;
  }
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: none!important;
  }
</style>

效果：

在这里插入图片描述

二、使用Swiper进行滚动：

1、文档说明：https://swiperjs.com/vue

2、下载swiper说明：

高版本（10.0.2）引入 Autoplay 会报错，所以我下载了7.4.1版本（npm install swiper@7.4.1）

如果7.4.1版本不好用，可以参考这个文章：https://blog.csdn.net/qq_36131788/article/details/121083045

3、安装swiper成功后在 main.ts 文件中引入css：

import ‘swiper/css’

代码：

<template>
    <div class="swiper-components">
        <div class="thead">
            <div v-for="(item,index) in theadData" :key="index" class="thead-tr">{{ item }}</div>
        </div>
        <swiper
            :slides-per-view="1"
            :autoplay="{ delay: 2000, disableOnInteraction: false }"
            :direction="'vertical'"
            :scrollbar="{ draggable: false }"
            :loop="true"
            :modules="modules"
            class="swiper-content"
            >
            <swiper-slide v-for="(item, index) in tableData" :key="index">
                <div class="swiper-item" v-for="(subItem, subIndex) in item" :key="subIndex">
                    <div class="swiper-td">{{ subItem.index }}</div>
                    <div class="swiper-td">{{ subItem.name }}</div>
                    <div class="swiper-td">{{ subItem.money }}</div>
                </div>
            </swiper-slide>
            </swiper>
    </div>
  </template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
// 引入swiper核心和所需模块
import  {Autoplay} from 'swiper'
// 引入swiper所需要的组件
import { Swiper, SwiperSlide } from 'swiper/vue'

export default defineComponent({
  name: 'SwiperComponents',
  components: {
    Swiper,
    SwiperSlide
  },
  setup () {
    // 表格的数据类型
    interface tableType {
      index: number | string;
      name: string;
      money: number;
    }
    const data = reactive({
      tableData: [] as Array<tableType>[], // 列表需要的数据
      modules: [Autoplay], // 这个是自动播放的重点，没有这个不能自动播放！
      slidesCount: 6, // 每次滑动的数据数量
      theadData: ['序号', '名称', '金钱'] // 表格表头
    })

    onMounted(() => {
      init()
    })

    // 数据初始化
    const init = () => {
      // 首先拿到请求的数据
      let arr = []
      for (let i = 0; i < 30; i++) {
        const obj = {
          index: i + 1,
          name: '987654',
          money: Math.floor(Math.random() * 100)
        }
        arr.push(obj)
      }

      // 根据一页要展示的数量进行数据的处理
      for (let i = 0; i < arr.length; i += data.slidesCount) {
        let obj = arr.slice(i, i + data.slidesCount)
        data.tableData.push(obj)
      }
    }

    return {
      ...toRefs(data)
    }
  }
})
</script>

  <style lang="scss" scoped>
  .swiper-components {
    margin-top: 40px;
    .thead {
        display: flex;
        justify-content: space-between;
        background: rgba(49,150,250,0.1);
        padding: 24px 40px 24px 34px;
        &-tr {
            font-size: 28px;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 40px;
        }
    }
    .swiper-content {
        height: 528px;
        .swiper-item {
            display: flex;
            justify-content: space-between;
            &:nth-child(2n) {
                background: rgba(49,150,250,0.1);
            }
        }
        .swiper-td {
            padding: 24px 0;
            font-size: 28px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 40px;
            &:first-child {
                width: 134px;
                text-align: center;
            }
            &:last-child {
                width: 140px;
                margin-right: 40px;
                text-align: center;
            }
        }
    }
  }
  </style>