滚动表格(vue版本)【已验证可正常运行】

演示图

注:以下代码来自于GPT4o:国内官方直连GPT4o

代码

javascript 复制代码
<template>
    <div>
        <div class="alarmList-child" ref="alarmList" @mouseenter.stop="autoRoll(1)" @mouseleave.stop="autoRoll()">
            <div class="alarm-item" v-for="(item,index) in alarmList" :key="index">
                <div class="alarm-item-top">
                    <div>{{ item.name }}</div>
                </div>
                <div class="alarm-item-bot">
                    <div>{{ item.time }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            alarmList: [
                {
                    name: '报警1',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容1'
                },
                {
                    name: '报警2',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容2'
                },
                {
                    name: '报警3',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容3'
                },
                {
                    name: '报警44',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容4'
                },
                {
                    name: '报警5',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容5'
                },
                {
                    name: '报警6',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容6'
                },
                {
                    name: '报警7',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容7'
                },
                {
                    name: '报警8',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容8'
                },
                {
                    name: '报警9',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容9'
                },
                {
                    name: '报警10',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容10'
                },
                {
                    name: '报警11',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容11'
                },
                {
                    name: '报警12',
                    time: '2021-09-01 12:00:00',
                    content: '报警内容12'
                }],
            timer: null,
            timerfir: null,
            scrollY: 20,//滚动距离
            speed: 0.5,//滚动速度

            }
    },
    mounted () {
        this.autoRoll()
    },
    destroyed () {
        clearInterval(this.timer)
        clearTimeout(this.timerfir)
    },
    methods: {
        autoRoll (flag) {
            if(flag) {
                clearInterval(this.timer)
                clearTimeout(this.timerfir)
                return;
            }
            let table = document.querySelector('.alarmList-child')
            this.timerfir = window.setTimeout(() => {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    //scrollHeight 获取元素内容高度(只读)
                    //scrollTop 获取或设置元素的垂直滚动条位置
                    //offsetHeight 获取元素的高度(只读)
                    this.scrollY += this.speed
                    if(this.scrollY >= table.scrollHeight - table.offsetHeight) {
                        this.scrollY = 0
                    }
                    table.scrollTop = this.scrollY
                }, 20)
            }, 1000)
        }
    }
}
</script>
<style lang="less">
.alarmList-child {
    margin-top: 200px;
    width: 800px;
    height: 200px;
    overflow: hidden;
    position: relative;
    .alarm-item {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .alarm-item-top {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .alarm-item-bot {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            div {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

</style>
相关推荐
小磊哥er9 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生14 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮19 分钟前
webpack基础
前端·webpack
YongGit38 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js