摘要：
渐变进度条，如图： 实现： dom： <div className={s.progress}> <div className={s.bar} style={{ width:'73%'}}/> </div> css：外层div设置背景色有透明度，内层div设置渐变，有宽度，有圆角 .progress{ 阅读全文
posted @ 2020-09-16 23:00
herry菌
阅读(1652)
评论(0)
推荐(0)
摘要：
css实现自动向上轮播，效果图： 实现方式： 外层div的盒子加入： div{ position:relative; animation: moveUp 8s 1s infinite; -webkit-animation: moveUp 8s 1s infinite; &:hover{ animat 阅读全文
posted @ 2020-09-16 22:37
herry菌
阅读(1966)
评论(0)
推荐(0)
摘要：
先上实现代码： function PubSub() { this.handlers = {}; } PubSub.prototype = { // 订阅事件(定义的key值,绑定的函数) on: function(eventType, handler){ var self = this; if(!( 阅读全文
posted @ 2020-09-16 16:41
herry菌
阅读(719)
评论(1)
推荐(0)
摘要：
2个组件都需要引入 API： publish：触发事件 subscribe：绑定事件 unsubscribe：卸载绑定事件 订阅与发送需要一个相同的字符串key进行绑定，一般我们会单独使用一个文件作为key的保存点，引入 在被动的组件中componentDidMount中可绑定事件 也可在前面定义一 阅读全文
posted @ 2020-09-16 15:25
herry菌
阅读(175)
评论(0)
推荐(0)
摘要：
先上代码： import React from 'react'; export default class ListArea extends React.Component { state = { currentIndex: 0, interval: 3000, suspend: false }; 阅读全文
posted @ 2020-09-16 14:47
herry菌
阅读(172)
评论(0)
推荐(0)
摘要：
这是个类似表格的布局，数据超出屏幕条数，因此需要每秒向上滚动一格。 使用： 表头渲染： <div className={s.head}> { structure.map(si => <div key={si.key} className={s.col} style={{width:si.width} 阅读全文
posted @ 2020-09-16 13:15
herry菌
阅读(237)
评论(0)
推荐(0)
摘要：
效果：鼠标移入自动向上滚动，鼠标移出停止滚动 滚动区域设置onMouseOver与onMouseOut事件。listEle表示需要滚动的列表dom，设置2个是为了达到无缝滚动效果。 onMouseOver清除定时器timer，达到停止滚动效果。 onMouseOut打开定时器timer，每100ms 阅读全文
posted @ 2020-09-16 12:36
herry菌
阅读(1243)
评论(0)
推荐(0)
浙公网安备 33010602011771号