-
先看template中的代码, 我这里是放了两个一模一样的dom,而这个dom就是我们要滚动的dom,这里是打了一个时间差,在第二个dom滚动结束的时候,tableTop=0,这个时候就会重新开始滚动,而视觉上就会产生一个无缝衔接的效果,样式代码我就不贴了
<div class="carport-state" :style="{transform:`translateY(${tableTop}px)`}">
<div v-for="(item,index) in listData" :key="item.id">
<div class="carport-state-item" :class="[item.status == 1 ? 'item-background-in' :'item-background-out']">
<i :class="[item.status == 1 ? 'icon-in' :'icon-out']"></i>
<p>{
{item.carport}}</p>
<i>{
{item.status == 1 ? '在库' :'未在库'}}</i>
</div>
</div>
<!-- 这里再放一个和上面一模一样的dom是为了实现无缝滚动的效果 -->
<div v-for="(item,index) in listData" :key="item.id" v-show="isAutoRoll">
<div class="carport-state-item" :class="[item.status == 1 ? 'item-background-in' :'item-background-out']">
<i :class="[item.status == 1