随笔列表第9页 - herry菌

2020年9月17日

摘要：效果图：如果还有数据，显示正在加载中，没有下一页数据了显示无更多数据做法：在state中设置表头信息structure、数据列表list、是否加载下一页isLoad state={ structure: [ { name: '排名', width: '15%', key: 'order', t 阅读全文

posted @ 2020-09-17 16:27 herry菌阅读(448) 评论(0) 推荐(0) 编辑

Echarts实现环形饼图效果

摘要：效果图：一般用于实现这种的饼图看下实现代码：第一个pie用于做扇形统计，第二个pie用于做圆形虚线第三个pie为最里面的圆。 const option={ series:[ { name: '访问来源', type: 'pie', hoverAnimation: false, color: [ 阅读全文

posted @ 2020-09-17 11:41 herry菌阅读(2578) 评论(0) 推荐(0) 编辑

Echarts实现折线图的填充渐变

摘要：效果图：渐变使用line的areaStyle属性，linear为线性渐变 let option={ series:[ { type:'line', areaStyle:{ color:{ //线性渐变 type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorS 阅读全文

posted @ 2020-09-17 09:58 herry菌阅读(2288) 评论(0) 推荐(0) 编辑

2020年9月16日

css3实现渐变进度条

摘要：渐变进度条，如图：实现： dom： <div className={s.progress}> <div className={s.bar} style={{ width:'73%'}}/> </div> css：外层div设置背景色有透明度，内层div设置渐变，有宽度，有圆角 .progress{ 阅读全文

posted @ 2020-09-16 23:00 herry菌阅读(1451) 评论(0) 推荐(0) 编辑

css3实现自动向上滚动，鼠标移入暂停滚动

摘要： 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菌阅读(1720) 评论(0) 推荐(0) 编辑

pubSub-js观察者模式订阅触发实现原理

摘要：先上实现代码： function PubSub() { this.handlers = {}; } PubSub.prototype = { // 订阅事件(定义的key值,绑定的函数) on: function(eventType, handler){ var self = this; if(!( 阅读全文

posted @ 2020-09-16 16:41 herry菌阅读(661) 评论(1) 推荐(0) 编辑

pubSub-js观察者模式订阅发送组件实现跨组件交互

摘要： 2个组件都需要引入 API： publish：触发事件 subscribe：绑定事件 unsubscribe：卸载绑定事件订阅与发送需要一个相同的字符串key进行绑定，一般我们会单独使用一个文件作为key的保存点，引入在被动的组件中componentDidMount中可绑定事件也可在前面定义一阅读全文

posted @ 2020-09-16 15:25 herry菌阅读(155) 评论(0) 推荐(0) 编辑

ListArea滚动组件的实现

摘要：先上代码： 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菌阅读(164) 评论(0) 推荐(0) 编辑

ListArea滚动组件的使用，实现表格每项向上滚动

摘要：这是个类似表格的布局，数据超出屏幕条数，因此需要每秒向上滚动一格。使用：表头渲染： <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菌阅读(219) 评论(0) 推荐(0) 编辑

鼠标移入自动向上滚动，鼠标移出停止滚动的实现

摘要：效果：鼠标移入自动向上滚动，鼠标移出停止滚动滚动区域设置onMouseOver与onMouseOut事件。listEle表示需要滚动的列表dom，设置2个是为了达到无缝滚动效果。 onMouseOver清除定时器timer，达到停止滚动效果。 onMouseOut打开定时器timer，每100ms 阅读全文

posted @ 2020-09-16 12:36 herry菌阅读(1129) 评论(0) 推荐(0) 编辑

公告