vue滑动动画,vue列表自动滚动
这篇文章主要为大家详细介绍了某视频剪辑软件使用动画实现滚动表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件使用动画实现滚动表格效果的具体代码，供大家参考，具体内容如下
需求
在一些大屏项目中，需要使用到表格行数据滚动。本文介绍在某视频剪辑软件项目中使用动画实现滚动表格。
某视频剪辑软件代码如下
模板
div style= cursor:default；边距：9px 10px 18px
div class=表格标题表格行
div class= table-cell style= width:25% 计划名称/div
div class= table-cell style= width:40% 核心企业/div
div class= table-cell style= width:15% 发行状态/div
div class= table-cell style= width:20%；文本对齐：右对齐金额（元)/div
/div
div class=表体
div:class= { scroll-wrap :getplaydata。长度0
差异
class=table-row
:class={ hasBgc: index % 2===0 }
获取播放数据中的v-for=(项目，索引
:key=index
:ref=row_ index
div class= table-cell style= width:25% :title= item。产品名称
{{ item.productName }}
/div
div class= table-cell style= width:40% :title= item。corename“{ item。corename } }/div
div class= table-cell style= width:15% :title= item。发布“{ item。发布} }/div
div class= table-cell style= width:20%； text-align:right :title= item。发布金额
{{ item.publishAmount }}
/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
道具：{
数据：{
类型：数组，
默认值：()={
return[]；
},
},
},
data() {
返回{
initMt: 0，
//getPlayData:[]，
可见：真实，
停：假的，
};
},
方法：{
播放(){
const row=this .$ refs[ row _ 0 ][0]；
setTimeout(()={
this.visible=false
这个. nextTick(()={
this.initMt
如果(这个。init mt===this。数据。长度){
这个。init mt=0；
}
this.visible=true
});
这个。play()；
}, 2000);
},
},
观察：{
},
计算值：{
getPlayData() {
返回这个。数据。concat(这个。数据。slice(0，4))；
},
},
已安装(){
//这个。play()；
},
};
/脚本
样式lang=scss 范围
$单元格高度：35px。表格行{
显示器：flex
行高：35px
高度：35px
过渡：全0.3秒
border-bottom: 1px solid rgba(63，88，114，1)；
}。表格标题{
颜色：rgba(87，150，190，1)；
}。表格单元格{
文本对齐：左对齐；
字体大小：12px
文本溢出：省略号；
溢出：隐藏；
}
//.hasBgc {
//背景：rgb(0，59，81)；
//}。隐藏行{
身高：0!重要；
行高：0!重要；
显示：无！重要；
}。表体{
身高：142像素
溢出-y:隐藏；表格行{
颜色：# fff
}
}。滚动包装{
动画：卷轴18s线性无限；
位置：相对；
}。滚动环绕：悬停{
动画-播放-状态：暂停；
}
@关键帧滚动{
从{
top:0；
}
到{
top:-8 * $单元格高度；
}
}
/风格
通过动画动态改变表格的位置来达到移动的效果。把数据的一半拼接在原数据上作为滚动数据，达到衔接的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。