造个迷你小轮子-轮播公告栏

最新推荐文章于 2023-08-17 09:28:23 发布

置顶

LYFlied

最新推荐文章于 2023-08-17 09:28:23 发布

阅读量1k

点赞数 21

分类专栏： react组件文章标签：前端组件化 react javascript 动画效果

本文链接：https://blog.csdn.net/qq_39903567/article/details/114849970

版权

在项目UI改版中，作者实现了一个公告栏组件，具备滚动展示和避免重复展示的功能。组件利用JavaScript的setInterval实现内容滚动，通过sessionStorage保存显示状态以防止同一窗口重复展示。同时提到了两个额外的前端组件：日期选择器和数字展示组件。

摘要由CSDN通过智能技术生成

背景

目前在做项目的UI改版，需要加一个公告栏，用于向用户展示公告信息；当公告信息过长时，公告栏对内容进行滚动展示；用户可以点击隐藏，并且同一窗口不再重复展示。
先来看看效果：

拓展

期间也造了两个其他的迷你轮子：不使用滚动插件的日期选择器、带切换动画的数字展示组件
感兴趣的可以去看看：

日期组件

数字展示组件

效果演示.gif

公告栏组件实现

滚动展示

布局：

<div className='ui-notice-container'>
    <div className="icon-notice"></div>
    <div ref='con' className='ui-notice'>
        <span ref='word'>{ noticeMessage }</span>
    </div>
    <div className='iconfont icon-close' onClick={this.handleClose.bind(this)}></div>
</