php网站开发文档模板,杨永生的设计风格,设计上海2020,WordPress文章显示html如果列表数据有几千几万条的话#xff0c;一次渲染出来会导致页面卡顿。除了懒加载和分页加载数据还可以使用虚拟列表来解决这个问题。虚拟列表的高度是整个列表实际的高度#xff0c;但是实际渲染的只是可视窗口部分的内容#xff0c;通过滚动时#xff0c;可视区域内部分…如果列表数据有几千几万条的话一次渲染出来会导致页面卡顿。除了懒加载和分页加载数据还可以使用虚拟列表来解决这个问题。虚拟列表的高度是整个列表实际的高度但是实际渲染的只是可视窗口部分的内容通过滚动时可视区域内部分向下偏移和更新可视区域内的数据来实现。
vue-virtual-scroller是VUE官网推荐的一个虚拟列表库地址 https://github.com/Akryum/vue-virtual-scroller/tree/master/packages/vue-virtual-scroller
这里实现了一个每项数据高度固定的简单的虚拟列表
template!-- 最底层的可视区容器 --div reflist classinfinite-list-container scrollscrollEvent($event)!-- 中间的可滚动区域z-index-1高度和真实列表相同目的是出现相同的滚动条 --div classinfinite-list-phantom :style{ height: listHeight px }/div!-- 最上层的可视区列表数据和偏移距离随着滚动距离的变化而变化 --div classinfinite-list :style{ transform: getTransform }div classinfinite-list-item v-foritem in visibleData :keyitem.id :style{ height: itemSize px }{{ item.label }}/div/div/div
/templatescript
const list []
for (let i 0; i 10000; i) {list.push({id: i,label: virtual-list ${i}})
}export default {name: MyVirtualList,data() {return {//列表数据items: list,//列表项高度itemSize: 50,screenHeight: 0, //可视区域高度startOffset: 0, //偏移距离start: 0, //起始索引end: 0 //结束索引}},computed: {//列表总高度listHeight() {return this.items.length * this.itemSize},//可视区列表的项数visibleCount() {return Math.ceil(this.screenHeight / this.itemSize)},//可视区列表偏移距离对应的样式getTransform() {return translate3d(0,${this.startOffset}px,0)},//获取可视区列表数据visibleData() {return this.items.slice(this.start, Math.min(this.end, this.items.length))}},mounted() {this.screenHeight this.$refs.list.clientHeightthis.start 0this.end this.start this.visibleCount},methods: {scrollEvent() {//当前滚动位置let scrollTop this.$refs.list.scrollTop//此时的开始索引this.start Math.floor(scrollTop / this.itemSize)//此时的结束索引this.end this.start this.visibleCount//此时的偏移距离this.startOffset scrollTop - (scrollTop % this.itemSize)//每次滚动一个完整的item的时候可视区域才会进行向下偏移如果和滚动的距离保持实时一样的话可视区视觉上就没有滚动的效果只是数据在改变}}
}
/scriptstyle scoped
.infinite-list-container {height: 100%;overflow: auto;position: relative;
}.infinite-list-phantom {position: absolute;left: 0;top: 0;right: 0;z-index: -1;
}.infinite-list {left: 0;right: 0;top: 0;position: absolute;
}.infinite-list-item {line-height: 50px;text-align: center;color: #555;border: 1px solid #ccc;box-sizing: border-box;
}
/style参考链接 https://cn.vuejs.org/guide/best-practices/performance.html https://segmentfault.com/a/1190000041068198?utm_sourcesf-similar-article
