背景
目前在做项目的UI改版,需要加一个公告栏,用于向用户展示公告信息;当公告信息过长时,公告栏对内容进行滚动展示;用户可以点击隐藏,并且同一窗口不再重复展示。
先来看看效果:
拓展
期间也造了两个其他的迷你轮子:不使用滚动插件的日期选择器、带切换动画的数字展示组件
感兴趣的可以去看看:
公告栏组件实现
滚动展示
布局:
<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>
</