这篇文章主要介绍“Vue怎么使用动画实现滚动表格效果”,在日常操作中,相信很多人在vue怎么使用动画实现滚动表格效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么使用动画实现滚动表格效果”的疑惑有所
这篇文章主要介绍“Vue怎么使用动画实现滚动表格效果”,在日常操作中,相信很多人在vue怎么使用动画实现滚动表格效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么使用动画实现滚动表格效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在一些大屏项目中,需要使用到表格行数据滚动。
vue代码如下
<template> <div > <div class="table-header table-row"> <div class="table-cell" >计划名称</div> <div class="table-cell" >核心企业</div> <div class="table-cell" >发行状态</div> <div class="table-cell" >金额(元)</div> </div> <div class="table-body"> <div :class="{ 'scroll-wrap': getPlayData.length > 0 }"> <div class="table-row" :class="{ hasBGC: index % 2 === 0 }" v-for="(item, index) in getPlayData" :key="index" :ref="'row_' + index" > <div class="table-cell" :title="item.productName"> {{ item.productName }} </div> <div class="table-cell" :title="item.coreName">{{ item.coreName }}</div> <div class="table-cell" :title="item.publish">{{ item.publish }}</div> <div class="table-cell" :title="item.publishAmount"> {{ item.publishAmount }} </div> </div> </div> </div> </div></template><script>export default { props: { data: { type: Array, default: () => { return []; }, }, }, data() { return { initMt: 0, // getPlayData:[], visible: true, stop: false, }; }, methods: { play() { const row = this.$refs["row_0"][0]; setTimeout(() => { this.visible = false; this.$nextTick(() => { this.initMt++; if (this.initMt === this.data.length) { this.initMt = 0; } this.visible = true; }); this.play(); }, 2000); }, }, watch: { }, computed: { getPlayData() { return this.data.concat(this.data.slice(0, 4)); }, }, mounted() { // this.play(); },};</script><style lang="sCSS" scoped>$cellHeight: 35px;.table-row { display: flex; line-height: 35px; height: 35px; transition: all 0.3s; border-bottom: 1px solid rgba(63, 88, 114, 1);}.table-header { color: rgba(87, 150, 190, 1);}.table-cell { text-align: left; font-size: 12px; text-overflow: ellipsis; overflow: hidden;}// .hasBgc {// background: rgb(0, 59, 81);// }.hidden-row { height: 0 !important; line-height: 0 !important; display: none !important;}.table-body { height: 142px; overflow-y: hidden; .table-row { color: #fff; }}.scroll-wrap { animation: scroll 18s linear infinite; position: relative;}.scroll-wrap:hover { animation-play-state: paused;}@keyframes scroll { from { top: 0; } to { top: -8 * $cellHeight; }}</style>
通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据,达到衔接的效果。
到此,关于“vue怎么使用动画实现滚动表格效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: vue怎么使用动画实现滚动表格效果
本文链接: https://www.lsjlt.com/news/326813.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0