网站必须兼容哪些浏览器,怎么做网站搜索引擎,网站建设动画代码,艺术字logo设计在线生成前言#xff1a;当一个页面中需要接受接口返回的全部数据进行页面渲染时间#xff0c;如果数据量比较庞大#xff0c;前端在渲染dom的过程中需要花费时间#xff0c;造成页面经常出现卡顿现象。 需求#xff1a;通过虚拟加载#xff0c;优化页面渲染速度 缺点#xff1a… 前言当一个页面中需要接受接口返回的全部数据进行页面渲染时间如果数据量比较庞大前端在渲染dom的过程中需要花费时间造成页面经常出现卡顿现象。 需求通过虚拟加载优化页面渲染速度 缺点需要固定好每一行元素的高度 实现方法
策略设置可视区域高度、滚动高度、每个元素高度、初始展示的元素数据通过监听滚动条滚动高度根据高度重新获取需要展示的数据进行遍历
export default class Cp extends Component {constructor(props){super(props)this.state {dataListTotal: 100,// 元素总数据dataList: new Array(100).fill().map((item,index)index1),// 初始展示数据showDataList: new Array(20).fill().map((item,index)index1),// 每个元素高度itemHeight: 20,// 可视区域高度viewHeight: 300}}handleScrollChange (e){const {itemHeight, viewHeight, dataList} this.state// 获取滚动距离let scrollTop e.target.scrollTop;// 初始元素索引 滚动距离 / 每一项的高度const startIndex Math.round(scrollTop / itemHeight);// 结束元素索引 初始索引 容器高度 / 每一项的高度const endIndex startIndex viewHeight / itemHeight;// 截取数据let showDataList dataList.slice(startIndex, endIndex);this.setState({showDataList,scrollTop,})}render(){const {showDataList, scrollTop} this.stateconsole.log(showDataList, showDataList)return div classNamecontainer onScroll{this.handleScrollChange}// 可视区域撑起内部高度让外层容器产生滚动条div classNamescroll-container/div// 元素区域transform给元素容器设置偏移量让元素在可视区域内呈现div classNameitem-container style{{transform: translateY( scrollTop px),}}{Array.isArray(showDataList) showDataList.length 0? showDataList.map(item{return div classNameitem-content{item}/div}): null}/div/div}
}// 可视区域容器的样式
.container {width: 200px;height: 300px;border: 1px solid #ff6d00;overflow-y: scroll;position: relative;
}// 滚动容器的样式
.scroll-container {height: 2000px;
}// 每个元素的容器样式
.item-container {position: absolute;top: 0;left: 0;
}.item-content {height: 20px;
}
