uniapp开发滚动公告的实现代码

admin

CSS部分：

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

复制代码

onload部分：

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

复制代码

html部分：

1. <!-- 滚动公告 -->
   
2.                 <view class='tui-notice-board' v-if="index_notice">
   
3.                         <view class="tui-icon-bg">
   
4.                                 <tui-icon name="news-fill" :size='24' color='#ff0000'></tui-icon>
   
5.                         </view>
   
6.                         <view class="tui-scorll-view">
   
7.                                 <view class="tui-notice" :class="[animation?'tui-animation':'']">{{index_notice}}</view>
   
8.                         </view>
   
9.                 </view>

复制代码