原文：https://blog.csdn.net/weixin_43123984/article/details/125003600 #### 处理了一下只显示正确的数据 ``` <template> <div class="left"> <div class="table"> <div class="table-header"> <div class="table-header-item-title">名称</div> <div class="table-header-item-title">状态</div> <div class="table-header-item-title">数据标题1</div> <div class="table-header-item-title">数据标题2</div> </div> <div class="scrollWrap" :style="{ height: scrollWrapHeight + 'px', overflowY: 'hidden', }"> <div :class="scrollNum > 1 ? 'scroll' : ''" :style="{ animationDuration: time + 's', }" v-for="(a, index) in scrollNum" :key="index"> <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index"> <div class="table-body-item-title"> {{ item.name }} </div> <div class="table-body-item-title"> <div class="circle"></div> </div> <div class="table-body-item-title">{{ item.tampNum }}℃</div> <div class="table-body-item-title">{{ item.eleNum }}A</div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'ZuxiaTableScroll', data() { return { // 调节滚动速率 time: 15, successData: [ { name: 'aaa嘿嘿和哈哈哈', status: 1, tampNum: 10, eleNum: 15 }, { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 }, { name: 'eee', status: 1, tampNum: 10, eleNum: 15 }, { name: 'fff', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 }, { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 }, { name: 'iii', status: 1, tampNum: 10, eleNum: 15 }, { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 }, { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 }, ], } }, computed: { errBgColor: function () { return function (index) { if (index % 2 === 0) { return '#e8f7ff' } else { return '#ffffff' } } }, // successBgColor: function () { // return function (index) { // if (this.errData.length % 2 === 0) { // if (index % 2 === 0) { // return '#e8f7ff' // } else { // return '#ffffff' // } // } else { // if (index % 2 === 0) { // return '#ffffff' // } else { // return '#e8f7ff' // } // } // } // }, // 滚动层高度 scrollWrapHeight: function () { // left高度 - table-header高度 - table-bodyError高度 * 个数 return 600 - 52 }, // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画 // 否则就一份，不填加滚动动画 scrollNum: function () { let successHeight = this.successData.length * 52 if (successHeight > this.scrollWrapHeight) { return 2 } else { return 1 } }, }, } </script> <style lang="scss" scoped> .left { width: 520px; height: 600px; background-color: #fab4b4; border-bottom: 1px solid red; position: relative; .table-header { width: 100%; background-color: skyblue; color: #e1f3ff; font-size: 16px; font-weight: 700; display: flex; .table-header-item-title { height: 52px; width: 100%; display: flex; justify-content: center; align-items: center; } } .table-bodyError, .table-bodySuccess { width: 100%; color: red; font-size: 16px; display: flex; .table-body-item-title { width: 100%; height: 52px; display: flex; justify-content: center; align-items: center; .circle { width: 12px; height: 12px; background: #ea4141; border-radius: 50%; } } } .table-bodySuccess { color: #000; .table-body-item-title { .circle { background: #29b153; } } } .scrollWrap::-webkit-scrollbar { width: 0 !important; } .scroll { animation: scrollData 10s infinite linear; } @keyframes scrollData { from { transform: translateY(0px); } to { transform: translateY(-100%); } } } </style> ``` #### 可以鼠标放上去停止滚动 ``` <template> <div class="left"> <div class="table"> <div class="table-header"> <div class="table-header-item-title">名称</div> <div class="table-header-item-title">状态</div> <div class="table-header-item-title">数据标题1</div> <div class="table-header-item-title">数据标题2</div> </div> <div class="scrollWrap" :style="{ height: scrollWrapHeight + 'px', overflowY: 'hidden', }"> <div ref="content" @mouseleave="toStartRun" @mouseenter="toPausedRun" :class="[scrollNum > 1 ? 'scroll' : '',animationPlayState]" :style="{ animationDuration: time + 's', }" v-for="(a, index) in scrollNum" :key="index"> <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index"> <div class="table-body-item-title"> {{ item.name }} </div> <div class="table-body-item-title"> <div class="circle"></div> </div> <div class="table-body-item-title">{{ item.tampNum }}℃</div> <div class="table-body-item-title">{{ item.eleNum }}A</div> </div> </div> </div> </div> </div> </template> <script> export default { name: 'ZuxiaTableScroll', data() { return { animationPlayState:"animationPlayStateRun", // 调节滚动速率 time: 15, successData: [ { name: 'aaa嘿嘿和哈哈哈', status: 1, tampNum: 10, eleNum: 15 }, { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 }, { name: 'eee', status: 1, tampNum: 10, eleNum: 15 }, { name: 'fff', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 }, { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 }, { name: 'iii', status: 1, tampNum: 10, eleNum: 15 }, { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 }, { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 }, ], } }, computed: { errBgColor: function () { return function (index) { if (index % 2 === 0) { return '#e8f7ff' } else { return '#ffffff' } } }, // 滚动层高度 scrollWrapHeight: function () { // left高度 - table-header高度 - table-bodyError高度 * 个数 return 600 - 52 }, // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画 // 否则就一份，不填加滚动动画 scrollNum: function () { let successHeight = this.successData.length * 52 if (successHeight > this.scrollWrapHeight) { return 2 } else { return 1 } }, }, methods: { toPausedRun() { //alert(11) //this.$refs.content.style.backgroundColor = 'red' //this.$refs.content.style.animationPlayState="paused" this.animationPlayState = "animationPlayStatePaused" }, toStartRun() { this.animationPlayState = "animationPlayStateRun" //alert(22) } } } </script> <style lang="scss" scoped> .left { width: 520px; height: 600px; background-color: #fab4b4; border-bottom: 1px solid red; position: relative; .table-header { width: 100%; background-color: skyblue; color: #e1f3ff; font-size: 16px; font-weight: 700; display: flex; .table-header-item-title { height: 52px; width: 100%; display: flex; justify-content: center; align-items: center; } } .table-bodyError, .table-bodySuccess { width: 100%; color: red; font-size: 16px; display: flex; .table-body-item-title { width: 100%; height: 52px; display: flex; justify-content: center; align-items: center; .circle { width: 12px; height: 12px; background: #ea4141; border-radius: 50%; } } } .table-bodySuccess { color: #000; .table-body-item-title { .circle { background: #29b153; } } } .scrollWrap::-webkit-scrollbar { width: 0 !important; } .animationPlayStateRun { animation-play-state:running; } .animationPlayStatePaused { animation-play-state:paused; } .scroll { animation: scrollData 10s infinite linear; } @keyframes scrollData { from { transform: translateY(0px); } to { transform: translateY(-100%); } } } </style> ```