uniapp实现滚动公告从右往左滚动
css代码：.tui-notice-board {
width: 100%;
padding-right: 30rpx;
box-sizing: border-box;
font-size: 28rpx;
height: 60rpx;
background: #fff8d5;
display: flex;
align-items: center;
z-index: 999;
}
.tui-icon-bg {
background: #fff8d5;
padding-left: 15rpx;
position: relative;
z-index: 10;
}
.tui-icon-class {
margin-right: 12rpx;
}
.tui-scorll-view {
/* flex: 1;
line-height: 1; */
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
color: #f54f46;
}
.tui-notice {
display: flex;
align-items: center;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(100%, 0, 0);
}
.tui-animation {
-webkit-animation: tui-rolling 12s linear infinite;
animation: tui-rolling 12s linear infinite;
}
@-webkit-keyframes tui-rolling {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-170%, 0, 0);
}
}
@keyframes tui-rolling {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-170%, 0, 0);
}
}view代码：
<view class='tui-notice-board'>
<view class="tui-icon-bg">
<tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
</view>
<view class="tui-scorll-view">
<view class="tui-notice" :class="">
{{item}}
</view>
</view>
</view>data中定义动画：
animation: false,在onload()中加载函数：
// 滚动公告
setTimeout(() => {
this.animation = true
}, 600)
页:
[1]