react + antd Progress页面滚动优化

import React, { useEffect, useState } from 'react'
import styles from './style.less'
import { Progress } from 'antd';
import { ReconciliationOutlined } from '@ant-design/icons';
const data = [{ name: '北京市', people: 1560 },{ name: '河北省', people: 1404 },{ name: '广东省', people: 1355 },{ name: '河南省', people: 1253 },{ name: '湖北省', people: 1164 },{ name: '鹿邑省', people: 1132 },{ name: '后陈县', people: 1100 },{ name: '赵村城', people: 1023 },{ name: '幕店城', people: 998 },{ name: '观音寺', people: 816 },{ name: 'F4', people: 709 },{ name: '端木磊', people: 623 },{ name: '叶硕', people: 599 },{ name: '上官瑞谦', people: 200 },{ name: '蔚', people: 12 },
]const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
let newData = (maxN(data)[0])
const Index = () =>
{const [timer, setTimer] = useState(null);  // 定时器useEffect(() =>{  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~// 如果要请求数据 请在调用数据后请求此方法InitialScroll(data)return () =>{clearInterval(timer)}}, [])  // 检测数组内变量 如果为空 则监控全局const InitialScroll = (data) =>{let core = document.querySelector('#core');let con1 = document.getElementById("con1");let con2 = document.getElementById("con2");let speed = 50;con2.innerHTML = con1.innerHTML;if (data.length > 5)  // 只有当大于五条数据的时候 才会看起滚动 {let time = setInterval(() =>{if (core.scrollTop >= con1.scrollHeight){core.scrollTop = 0// setTimeout(() => { v.scrollTop = 0 }, 1000)} else{core.scrollTop++}}, speed)setTimer(time)  // 定时器保存变量 利于停止}}return (<div className={styles.container}><div className={styles.overall}><div className={styles.navBar}><div className={styles.navBarImg}> <ReconciliationOutlined className={styles.ReconciliationOutlined} /></div><span className={styles.navBarSpan}>后陈</span></div><div className={styles.PopulationCities}><span className={styles.PopulationCitiesTitle}>鹿邑人口信息</span><span className={styles.PopulationCitiesUnit}>人数</span></div><div onMouseEnter={() =>{if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消clearInterval(timer)}} onMouseLeave={() =>{if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消InitialScroll(data)}}id='core' className={styles.core}><ul id='con1'>{data.map((data, index) => (<li><div key={index} className={styles.coreColumnar}><div className={styles.particular}><span className={styles.coreColumnarTitle}>{data.name}</span><span className={styles.particularNumber}>{data.people}</span><span className={styles.coreColumnarUnit}>人</span></div><Progressformat={() => null}strokeColor={{from: 'rgba(75, 78, 91, 1)',to: 'rgba(72, 213, 0, 1)',}}percent={(data.people / newData.people) * 100}className={styles.Progress}status="active"/></div></li>))}</ul><ul id='con2'></ul></div></div></div >)
}export default Index

CSS

ul,
li {padding: 0;margin: 0;list-style: none
}.container {position: relative;width: 100%;height: 100%;line-height: 1;.overall {margin: 200px auto;position: relative;width: 540px;height: 383px;border-radius: 4px;box-sizing: border-box;background: linear-gradient(0deg, rgba(10, 15, 22, 1, .7) 0%, rgba(21, 31, 45, 1, .7) 100%);line-height: 1.45;}img {width: 100%;height: 100%;}
}.navBar {display: flex;align-items: center;width: 100%;height: 60px;background: linear-gradient(0deg, #1B478F 0%, #151F2D 100%);.navBarImg {margin-left: 22px;width: 34px;height: 34px;.ReconciliationOutlined {font-size: 34px;color: #fff;}}.navBarSpan {margin-left: 9px;font-size: 30px;font-weight: 600;color: #FFFFFF;text-shadow: 0px 2px 2px #1A86FF;background: linear-gradient(0deg, rgba(90, 203, 255, 1) 0%, rgba(26, 134, 255, 1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
}.PopulationCities {display: flex;align-items: center;justify-content: space-between;padding: 0 31px 0 30px;height: 48px;.PopulationCitiesTitle {font-size: 20px;font-weight: 600;color: #86BCFF;}.PopulationCitiesUnit {font-size: 20px;font-weight: 600;color: #86BCFF;}
}::-webkit-scrollbar {// 隐藏进度条display: none;/* Chrome Safari */
}.core {padding-left: 17px;width: 100%;height: 260px;overflow: auto;.coreColumnar {padding-left: 14px;width: 506px;height: 48px;background: rgb(31, 29, 43);border-radius: 4px;margin-bottom: 4px;.particular {display: flex;justify-content: space-between;color: #FFFFFF;overflow: hidden;.coreColumnarTitle {display: flex;align-items: center;// height: 30px;font-size: 18px;font-weight: 400;}.particularNumber {font-family: DINPro !important;margin-right: 4px;flex: 1;text-align: right;font-size: 20px;font-family: DINPro !important;font-weight: bold;}.coreColumnarUnit {margin-right: 15px;font-size: 20px;font-weight: bold;color: #FEFEFF;}}}.Progress {display: block;margin-top: 5px;}
}:global {.ant-progress-inner {position: relative;display: inline-block;width: 100%;overflow: hidden;vertical-align: middle;background-color: rgba(42, 52, 69, .8);border-radius: 71px;}.ant-progress-show-info .ant-progress-outer {display: flex;justify-content: center;align-items: center;margin-right: calc(-2em - 8px);padding-right: 14px;overflow: hidden;}.ant-progress-line {position: relative;width: 100%;/* font-size: 14px; */height: 8px;overflow: hidden;}
}

react + antd Progress页面滚动优化相关推荐

react + antd Progress页面滚动
JS import React, { useEffect, useState } from 'react' import styles from './style.less' import { Pro ...
Antd点击select选择框，页面滚动，选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
2-4、React+antd页面UI美化——登录界面设计
React+Antd 实现组件的UI美化示例目标UI 创建一个页面page,用于用户登录,要求页面简洁.美观.易懂要求有背景要求引入antd登录表单组件要求有登录样式,基于antd的表单对页面 ...
acrobat 下拉列表逻辑_记一次无限列表滚动优化
背景长列表优化, 是页面性能优化中的一个比较常见的问题,也是面试中的常客. 刚好最近在的项目中, 遇到了一个长列表的性能问题,试过多种方案, 最后得以解决. 今天就给大家分享一下. 正文场景描述 ...
jq 下拉加载每次只执行一次_记一次无限列表滚动优化
背景长列表优化, 是页面性能优化中的一个比较常见的问题,也是面试中的常客. 刚好最近在的项目中, 遇到了一个长列表的性能问题,试过多种方案, 最后得以解决. 今天就给大家分享一下. 正文场景描述 ...
react antd confirm content list_基于react/vue开发一个专属于程序员的朋友圈应用
前言今天本来想开源自己写的 CMS应用的,但是由于五一期间笔者的 mac电脑突然崩溃了,所有数据无法恢复,导致部分代码丢失,但庆幸的是 cms的打包文件已上传服务器,感兴趣的朋友可以在文末链接中访问 ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制排序等功能需要 re ...

react + antd Progress页面滚动优化

react + antd Progress页面滚动优化相关推荐

最新文章

热门文章