uniapp实现滚动公告从右往左滚动

admin

css代码：

1. .tui-notice-board {
   
2.                 width: 100%;
   
3.                 padding-right: 30rpx;
   
4.                 box-sizing: border-box;
   
5.                 font-size: 28rpx;
   
6.                 height: 60rpx;
   
7.                 background: #fff8d5;
   
8.                 display: flex;
   
9.                 align-items: center;
   
10.                 z-index: 999;
    
11.         }
    
12.         .tui-icon-bg {
    
13.                 background: #fff8d5;
    
14.                 padding-left: 15rpx;
    
15.                 position: relative;
    
16.                 z-index: 10;
    
17.         }
    
18.         .tui-icon-class {
    
19.                 margin-right: 12rpx;
    
20.         }
    
21.         .tui-scorll-view {
    
22.                 /* flex: 1;
    
23.                 line-height: 1; */
    
24.                 display: flex;
    
25.                 align-items: center;
    
26.                 white-space: nowrap;
    
27.                 overflow: hidden;
    
28.                 color: #f54f46;
    
29.         }
    
30.         .tui-notice {
    
31.                 display: flex;
    
32.                 align-items: center;
    
33.                 -webkit-backface-visibility: hidden;
    
34.                 -webkit-perspective: 1000;
    
35.                 transform: translate3d(100%, 0, 0);
    
36.         }
    
37.         .tui-animation {
    
38.                 -webkit-animation: tui-rolling 12s linear infinite;
    
39.                 animation: tui-rolling 12s linear infinite;
    
40.         }
    
41.         @-webkit-keyframes tui-rolling {
    
42.                 0% {
    
43.                         transform: translate3d(100%, 0, 0);
    
44.                 }
    
45.        
    
46.                 100% {
    
47.                         transform: translate3d(-170%, 0, 0);
    
48.                 }
    
49.         }
    
50.         @keyframes tui-rolling {
    
51.                 0% {
    
52.                         transform: translate3d(100%, 0, 0);
    
53.                 }
    
54.        
    
55.                 100% {
    
56.                         transform: translate3d(-170%, 0, 0);
    
57.                 }
    
58.         }

复制代码

view代码：

1. <view class='tui-notice-board'>
   
2.                                         <view class="tui-icon-bg">
   
3.                                                 <tui-icon name="news-fill" :size='24' color='#f54f46'></tui-icon>
   
4.                                         </view>
   
5.                                         <view class="tui-scorll-view">
   
6.                                                 <view class="tui-notice" :class="[animation?'tui-animation':'']">
   
7.                                                         {{item}}
   
8.                                                 </view>
   
9.                                         </view>
   
10.                                 </view>

复制代码

data中定义动画：

1. animation: false,

复制代码

在onload()中加载函数：

1. // 滚动公告
   
2.                         setTimeout(() => {
   
3.                                 this.animation = true
   
4.                         }, 600)

复制代码