滚动表格(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>
相关推荐
码蜂窝编程官方12 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss12 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃18 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰22 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye29 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm31 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子