大屏无限滚动效果实现

实现效果

实现思路

1. 首先固定最外层的高度，并且设置超出高度后隐藏
2. 设置每一行的高度为固定35PX，默认显示10行，所以最外层高度就是 35 * 10 + 表头的高度
3. 遍历时克隆一份表格数据，用于视差效果显示
4. 设置滚动动画，让表格行所在的父元素 tableTr 不断往上移动，当移动到末尾数据时，此时定义的移动距离 position 刚好时总高度的一半
5. 然后重置 position 的距离为0，因为我们克隆了一份数据，此时便不会有闪跳的情况，给人的感觉就是继续往上滚动，从而实现无限滚动的效果

完整代码

<template>
    <div class="table-box">
        <!--表头-->
        <div class="table-th">
            <div style="width: 60px">排名</div>
            <div>区域</div>
            <div>总服务人数</div>
            <div>2023年</div>
            <div>2024年</div>
        </div>
        <!--表格数据-->
        <div class="table-tr" ref="tableTr" @mouseenter="pause" @mouseleave="resume">
            <!--克隆一份数据-->
            <div
                    class="tr-item"
                    v-for="(item, index) in [...tableData, ...tableData]"
                    :key="index"
                    :class="{ 'even-background': index < 15 ? index % 2 !== 0 : index % 2 === 0 }"
            >
                <div class="index-item">
                    <div v-if="item.ranking <= 3" class="tab-index index-bg">
                        {{ item.ranking }}
                    </div>
                    <div v-else class="tab-index">
                        {{ item.ranking }}
                    </div>
                </div>
                <div>{{ item.province }}</div>
                <div>{{ item.totalServiceNumber }}</div>
                <div>{{ item.yearNumber2 }}</div>
                <div>{{ item.yearNumber3 }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'demo2',
        data() {
            return {
                tableData: [],
                position: 0,
                animationId: null,
            }
        },
        mounted() {
            this.getTableData()
            this.$nextTick(() => {
                this.animation()
            })
        },
        methods: {
            /**
             * 暂停动画。
             * 此方法通过取消动画帧请求来暂停动画的执行。
             * 当鼠标移入组件时调用，以暂停动画的播放。
             */
            pause() {
                cancelAnimationFrame(this.animationId) // 取消当前的动画帧请求
                this.animationId = null // 清空动画帧请求的ID
                this.isPaused = true // 标记动画为暂停状态
            },
            /**
             * 恢复动画。
             * 如果动画当前处于暂停状态，此方法会重新启动动画。
             * 当鼠标移出组件时调用，以恢复动画的播放。
             */
            resume() {
                if (this.isPaused) {
                    // 当动画处于暂停状态时
                    this.animation() // 重新调用动画函数
                    this.isPaused = false // 将动画状态设置为播放
                }
            },
            /**
             * 启动一个动画，用于滚动表格中的行。
             * 此函数没有参数和返回值，因为它直接操作DOM并启动一个循环动画。
             * 动画效果是通过改变行的垂直偏移来实现的。
             */
            animation() {
                // 获取将要进行动画的ul元素
                let tableTr = this.$refs.tableTr
                // 获取ul元素的高度，用于计算动画的终点
                let tableTrHeight = tableTr.offsetHeight
                /**
                 * 动画循环函数。
                 * 不断调整元素的垂直偏移，创造向下滚动的效果。
                 * 当元素偏移超过其高度的一半时，重置偏移值，实现循环滚动。
                 */
                const animate = () => {
                    this.position -= 2 // 每次循环减少的偏移量，控制动画速度
                    if (this.position <= -(tableTrHeight / 2)) {
                        this.position = 0 // 当偏移量小于等于负的一半高度时，重置偏移量，准备下一次循环
                    }
                    tableTr.style.transform = `translateY(${this.position}px)` // 应用偏移量到元素的transform属性上，实现动画效果
                    this.animationId = requestAnimationFrame(animate) // 请求下一个动画帧继续执行此函数，保持动画运行
                }
                animate() // 初始化动画
            },
            getTableData() {
                const generatedData = []
                const provinces = [
                    '北京',
                    '上海',
                    '广东',
                    '江苏',
                    '浙江',
                    '山东',
                    '河南',
                    '湖南',
                    '湖北',
                    '四川',
                    '福建',
                    '安徽',
                    '陕西',
                    '重庆',
                    '云南',
                ]
                const randomServiceNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
                for (let i = 0; i < 15; i++) {
                    const province = provinces[Math.floor(Math.random() * provinces.length)]
                    const totalServiceNumber = randomServiceNumber(1000, 10000).toString()
                    const yearNumber2 = randomServiceNumber(500, 5000).toString()
                    const yearNumber3 = randomServiceNumber(1000, 8000).toString()

                    generatedData.push({
                        ranking: i + 1,
                        province,
                        totalServiceNumber,
                        yearNumber2,
                        yearNumber3,
                    })
                }

                this.tableData = generatedData
            },
        },
    }
</script>

<style scoped lang="scss">
    .table-box {
        background-color: #000;
        color: white;
    / / 最外层父元素必须要定高 width: 500 px;
        height: 385px;
        overflow: hidden;
    }

    .table-th {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #1a8dec;
        font-weight: 100;
        font-size: 14px;
        padding: 2px 0;
        height: 35px;
        line-height: 35px;
        position: sticky;
        z-index: 2;

    &
    > div {
        width: 120px;
        text-align: center;
    }

    }

    .table-tr {
        display: flex;
        flex-direction: column;

    .tr-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-weight: 100;
        font-size: 12px;
        height: 35px;
    / / 每一行的高度也必须固定，用户计算滚动距离 line-height: 35 px;

    &
    > div {
        width: 120px;
        text-align: center;
    }

    .index-item {
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    }

    /
    /
    .tr-item:nth-child(odd) {
    / / background-color: #322c5f;
    / /
    }

    }

    .even-background {
        background-color: #322c5f;
    }

    .tab-index {
        width: 16px;
        height: 16px;
        line-height: 16px;

        text-align: center;
        border-radius: 50%;
        background-color: #4666ff;
    }

    .index-bg {
        background-color: #f43737;
    }
</style>