TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
忆点点
情不知从何起,一往而情深
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
35篇
.net core
15篇
cdn
1篇
云服务
1篇
前端
72篇
后端
6篇
随笔
19篇
架构
1篇
linux
6篇
git
3篇
virtualbox
1篇
app
1篇
英语
4篇
redis
4篇
docker
4篇
更多
mysql
6篇
sqlsugar
4篇
uni_app
4篇
数据库
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue自定义table表实现内容上下循环滚动
2670
人阅读
2023/3/15 16:10
总访问:
789080
评论:
0
收藏:
0
手机
分类:
前端
原文: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> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}