<template>
<!-- 文字轮播效果 -->
<div class="scroll">
<div>
</div>
<div class="ele" :class="this.dataList.length > 2 ? 'first-marquee scroll-box' : 'scroll-box'" v-if="dataList.length"
:style="{
animation: `first-marquee ${this.dataList.length}s linear infinite normal`,
}">
<div class="behaviorLeft" v-for="item in dataList">
{{ item.violationTypeName }}: {{ item.violationNums || 0 }}人
</div>
</div>
<div class="scroll-box" v-if="this.dataList.length > 2"
:style="{
animation: `first-marquee ${this.dataList.length}s linear infinite normal`,
}">
<div class="behaviorLeft" v-for="item in dataList">
{{ item.violationTypeName }}: {{ item.violationNums || 0 }}人
</div>
</div>
</div>
</template>
<script>
export default {
name: "cus-carousel",
props: {
dataList: {
type: Array,
default: () => []
}
},
watch: {
dataList() {
console.log('改变了',this.dataList.length);
let length = Math.ceil(this.dataList.length / 2)
console.log(length);
let animation = ''
let int = 0
for(let i = 0;i < length * 2 + 1;i++) {
animation = animation + `${i * (100 / (length*2))}% {
transform: translateY(${int}%);
}`
int = i % 2 === 0 ? int - (100 / length) : int
}
console.log(animation);
document.styleSheets[0].insertRule(
`@keyframes first-marquee {
${animation} }`,
0
);
}
},
mounted() {
console.log(document.styleSheets[0]);
},
data() {
return {
};
}
}
</script>
<style lang="css">
/* 定义第一个span的animation:时长 动画名字 匀速 循环 正常播放 */
</style>
<style lang="scss">
@keyframes second-marquee {
0% {
transform: translateY(0);
}
30%{
transform: translateY(-50%);
}
50%{
transform: translateY(-50%);
}
70%{
transform: translateY(-100%);
}
/* 向上移动 */
100% {
transform: translateY(-100%);
}
}
.behaviorLeft {
width: 50%;
}
.scroll {
overflow: hidden;
height: 20px;
width: 100%;
color: white;
&-box {
display: flex;
flex-wrap: wrap;
width: 100%;
// height: 100%;
// animation: scroll 20s linear infinite;
// position: relative;
}
}
</style>
05-01
1500
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)