论坛 › 开发技术 › uniapp开发滚动公告的实现代码

admin 发表于 2025-2-6 11:40:33

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 {
                overflow: hidden;
                white-space: nowrap;
                position: relative;
                width: 100%;
                color: #ff0000;
        }
       
        .tui-notice {
                display: inline-block;
                white-space: nowrap;
                width: max-content;
                -webkit-backface-visibility: hidden;
                -webkit-perspective: 1000;
                transform: translate3d(100%, 0, 0);
                animation: tui-rolling 12s linear infinite;
        }
       
        .tui-animation {
                -webkit-animation: tui-rolling 20s linear infinite;
                animation: tui-rolling 20s 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);
                }
        }onload部分：
// 滚动公告
                        setTimeout(() => {
                                this.animation = true
                        }, 600)html部分：
<!-- 滚动公告 -->
                <view class='tui-notice-board' v-if="index_notice">
                        <view class="tui-icon-bg">
                                <tui-icon name="news-fill" :size='24' color='#ff0000'></tui-icon>
                        </view>
                        <view class="tui-scorll-view">
                                <view class="tui-notice" :class="">{{index_notice}}</view>
                        </view>
                </view>

查看完整版本: uniapp开发滚动公告的实现代码