VUE之预警消息横向滚动注意：这个滚动是通过css3样式实现的
1、代码如下：
<div class="wrapper" >
<div class="bar" ref="barparent">
<ul class="bartext" ref="barchild" :>
<li v-for="(inf, j) in item.alarmInf" :key="j">{{ j + 1 }}.{{inf.title}}:{{ inf.value}}</li>
</ul>
</div>
</div>
2、样式
.wrapper {
padding: 0 15px;
display: flex;
align-items: center;
// background-color: "#FFF6EC";
}
.bar {
width: 100%;
height: 32px;
line-height: 32px;
overflow: hidden;
box-sizing: border-box;
}
.bartext{
white-space: nowrap;
display: inline-block;
}
.bartext li{
white-space: nowrap;
display: inline-block;
color: red;
font-size: 14px;
}
.
state-text-overflow{
animation: move_left_right 12s linear 0s infinite ;
}
@keyframes move_left_right {
from{
transform: translateX(0%);
}
to{
transform: translateX(-80%);
}
}
3、vue中，数据和⽅法
yellowBarTextStyle: {
paddingLeft: '305px'
}textstyle
//⽅法
move(){
this.deviceIds.forEach((item,index)=>{
//动态赋值动画区域的左padding 防⽌卡顿
const parentClientWidth = this.$refs.barparent[index].clientWidth;
// console.log("宽度",parentClientWidth)
/
/判断动画区域是否超出⽗元素宽度宽则有动画，不宽则⽆
const parent = this.$refs.barparent[index];
const child = this.$refs.barchild[index];
// console.log("对⽐",child.clientWidth,parent.clientWidth)
if(child.clientWidth > parent.clientWidth){
child.classList.add('state-text-overflow');
}else{
ve('state-text-overflow');
}
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。