Shulou(Shulou.com)05/31 Report--

这篇文章主要介绍"vue怎么使用动画实现滚动表格效果"，在日常操作中，相信很多人在vue怎么使用动画实现滚动表格效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue怎么使用动画实现滚动表格效果"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

需求

在一些大屏项目中，需要使用到表格行数据滚动。

vue代码如下

计划名称 核心企业 发行状态 金额(元) {{ item.productName }} {{ item.coreName }} {{ item.publish }} {{ item.publishAmount }} 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(); },};$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; }}

通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据，达到衔接的效果。

到此，关于"vue怎么使用动画实现滚动表格效果"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧!若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.