在app的table表格数据超过定义的长度实现无缝轮播效果,本来用了网上利用定位改变top的方法,但扩展性不好,于是使用transform来实现
1.循环轮播一般都有两个盒子,在一个盒子达到位置后立马回到初始位置替代第二个盒子的位置,
所以在这定义两个盒子 first-marquee ,second-marquee。其他的是我所做项目的这个table代码可以自行替换掉。
<view class="scroll">
<view :class="this.flowList.length > 8 ? 'first-marquee scroll-box' : 'scroll-box'"
v-if="flowList.length " :style="`animation-duration: ${this.flowList.length}s`">
<view class="flowList-content-table-tr" v-for="(item, index) in flowList">
<view class="flowList-content-table-item">
{{item.name}}
</view>
<view class="flowList-content-table-item">
{{item.areaName}}
</view>
<view class="flowList-content-table-item" style="width: 87rpx;">
{{$u.timeFormat(item.time, 'yyyy-mm-dd')}}
</view>
</view>
</view>
<cu-noData v-else></cu-noData>
<view class="scroll-box second-marquee" v-if="this.flowList.length > 8"
:style="`animation-duration: ${this.flowList.length}s`">
<view class="flowList-content-table-tr" v-for="(item, index) in flowList">
<view class="flowList-content-table-item">
{{item.name}}
</view>
<view class="flowList-content-table-item">
{{item.areaName}}
</view>
<view class="flowList-content-table-item" style="width: 87rpx;">
{{$u.timeFormat(item.time, 'yyyy-mm-dd')}}
</view>
</view>
</view>
</view>
2.后面是css代码
/* 定义第一个span的animation:时长 动画名字 匀速 循环 正常播放 */
.first-marquee {
animation: 12s first-marquee linear infinite normal;
// padding-right: 30%;
}
@keyframes first-marquee {
0% {
transform: translate3d(0, 0, 0);
}
/* 向上移动 */
100% {
transform: translate3d(0, -100%, 0);
}
}
.second-marquee {
/* 因为要在第一个span播完之前就得出现第二个span,所以就延迟12s才播放 */
animation: 12s second-marquee linear infinite normal;
// padding-right: 30%;
}
@keyframes second-marquee {
0% {
transform: translateY(0);
}
/* 向上移动 */
100% {
transform: translateY(-100%);
}
}
.scroll {
display: flex;
flex-direction: column;
overflow: hidden;
height: 187.6rpx;
&-box {
// animation: scroll 20s linear infinite;
// position: relative;
}
}
@keyframes scroll {
from { top: 0; }
to { top: -20 * 19.38rpx }
}
3.这样一个向下无线循环滚动的功能就完成了