1.修改排名走马灯逻辑,哪怕只有一条数据也要滚动
This commit is contained in:
@@ -56,9 +56,9 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="scroll-container">
|
||||
<div class="scroll-content" :style="animationCss" :class="[listData.length > 6 ? 'animal-css' : '']">
|
||||
<!-- <div class="scroll-content" :style="animationCss">-->
|
||||
<div v-for="(item,index) in listData.concat(listData.length > 6 ? listData : [])" :key="`top-list-data-${index}`">
|
||||
<!-- <div class="scroll-content animal-css" :style="animationCss">-->
|
||||
<div class="scroll-content" :style="animationCss" :class="[listData.length > 0 ? 'animal-css' : '']">
|
||||
<div v-for="(item,index) in listData" :key="`top-list-data-${index}`">
|
||||
<img style="border-radius: 8px" :src="item.faceUrl || require('@/assets/images/bigScreen/user.png')" alt="" />
|
||||
{{preName(item.name)}} {{item.userScore}}分 第{{(index % listData.length)+1}}名;
|
||||
</div>
|
||||
@@ -239,9 +239,9 @@
|
||||
},
|
||||
computed: {
|
||||
animationCss() {
|
||||
return this.listData && this.listData.length > 6 ? {
|
||||
return this.listData && this.listData.length > 0 ? {
|
||||
// animationName: 'scroll',
|
||||
animationDuration: this.listData.length * 3 + 's',
|
||||
animationDuration: (this.listData.length * 3 < 10 ? 10 : this.listData.length * 3) + 's',
|
||||
animationTimingFunction: 'linear',
|
||||
animationIterationCount: 'infinite'
|
||||
} : {}
|
||||
@@ -928,7 +928,7 @@
|
||||
}
|
||||
|
||||
.animal-css {
|
||||
animation: scroll 40s linear infinite;
|
||||
animation: scroll;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
|
||||
Reference in New Issue
Block a user