Vue3列表竖向滚动（包含使用swiper的翻页效果）-编程知识

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

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

代码：

<template><el-table:data="tableData":show-overflow-tooltip="true"class="alarmTable"><el-table-columntype="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(() => {// 获取当前表格内容的domlet 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 += 1if (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>