滚动表格(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>
相关推荐
Boilermaker199213 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子24 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102439 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构