微信小程序公告循环播放,主要是使用css来实现:
<view class='tongzhitext'>
<text class="tongzhi-text">这点是公告内容,长度要和动画的设置长度一起调整</text>
</view>
@keyframes remindMessage {
0% {
-webkit-transform: translateX(90%);
}
100% {
-webkit-transform: translateX(-180%);
}
}
.tongzhitext {
line-height: 50rpx;
margin-left:10rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tongzhi-text {
font-size: 28rpx;
animation: remindMessage 15s linear infinite;
width: 100%;
color: #000;
display: block;
}