小程序长列表显示：dom元素超出限制，如何解决空屏问题？

最新推荐文章于 2022-06-07 16:58:21 发布

玉米米是一只喵~

最新推荐文章于 2022-06-07 16:58:21 发布

阅读量1.2k

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/limpid_changli/article/details/116014533

版权

本文介绍了如何处理小程序中长列表因DOM元素过多而引发的空屏问题。通过监听scroll事件，动态控制可视区域内的元素渲染，实现局部渲染，确保列表正常显示。内容包括不分页和分页两种情况的解决方案，以及对应的HTML结构、SCSS样式和JavaScript代码示例。

摘要由CSDN通过智能技术生成

用于解决长列表dom渲染溢出造成的空白无法显示问题。

思路：借助scroll-view的scroll事件的事件对象中的scrollTop的值判断当前用户可视的第一个元素的index，用v-if控制当前可视元素的前10个item和后10个item渲染，其他的不渲染，达到局部渲染的效果，从而解决dom溢出的问题。item的作用是保留高度，使滚动条保持正常位置。

前提条件是list里面的item的height要一样，才能计算出当前可视的元素的index。

示意图如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPQfPgdq-1619074308336)(E:\work\problem_pic\长列表可视元素位置计算.png)]$

1)不分页情况

html结构如下：

	<scroll-view scroll-y="true" @scroll="scroll" :style="'height: 800rpx;background-color: #f0f0f6;'">
		<view class="list">
			<view class="item" v-for="(item,childIndex) in 100" :key="childIndex">
				<view class="hide" v-if="currentItem - 10 < childIndex+1 && currentItem + 10 > childIndex+1">
					123
				</view>

最低0.47元/天解锁文章

玉米米是一只喵~

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
小程序长列表显示：dom元素超出限制，如何解决空屏问题？

用于解决长列表dom渲染溢出造成的空白无法显示问题。思路：借助scroll-view的scroll事件的事件对象中的scrollTop的值判断当前用户可视的第一个元素的index，用v-if控制当前可视元素的前10个item和后10个item渲染，其他的不渲染，达到局部渲染的效果，从而解决dom溢出的问题。item的作用是保留高度，使滚动条保持正常位置。前提条件是list里面的item的height要一样，才能计算出当前可视的元素的index。示意图如下：1)不分页情况html结构如下： &
复制链接

扫一扫