最近在写一个春节活动,里面有一个类似拼多多展示中奖用户的弹幕滚动。
后台给了随机滚动将近一百条数据,之前写过一版,是使用定位,将数据顶上去,但是一秒一动的效果略略有些卡顿。后来决定使用css动画来实现
先来上代码吧
<view class="chat">
<view class="chatInfo" v-for="(item,i) in chatArr" :key='i'>
<view class="chatItem">{{item}}</view><br>
</view>
</view>
css代码
.chatInfo{
position: relative;
top: 0;
animation: rowScrollTest 200s linear infinite;
}
@keyframes rowScrollTest {
0% {
top: 0;
}
100% {
top:-3960rpx;//高度是我自己计算的,因为展示的内容不重要,高度就随意了一些;
}
}
效果如图