滚动表格(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>
相关推荐
Evenknow几秒前
将"修改源码"改为更专业的"二次开发",体现技术深度
前端·github
khalil1 分钟前
浅析TS枚举与位运算的结合
前端·typescript
yanglei1 分钟前
electron-updater 核心源码解析
前端
攻城狮的大师兄1 分钟前
红宝书(第四版)通读之查漏补缺
javascript
神仙别闹3 分钟前
基于Java+MySQL 实现(Web)日程管理系统
java·前端·mysql
布列瑟农的星空6 分钟前
webworker 实践:外部依赖引入和打包问题
前端·低代码
傻小胖8 分钟前
发布一个npm包,更新包,删除包
前端·npm·node.js
runnerdancer12 分钟前
解构shopify,从0到1实现落地页低代码编辑器
前端
苹果酱056729 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.31 分钟前
react和vue的区别之一
javascript·vue.js·react.js