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

最新推荐文章于 2022-07-11 15:18:32 发布

置顶

VIP文章 LYFlied

最新推荐文章于 2022-07-11 15:18:32 发布

阅读量1k

点赞数 21

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

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

版权

背景

目前在做项目的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>
<