uni-app table表格无缝循环轮播

在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.这样一个向下无线循环滚动的功能就完成了