在渲染前/不等高虚拟滚动,每个文本的高度该怎么计算出来?

渲染长列表时,要想性能好,需要用到虚拟滚动(有时候也叫虚拟列表,virtualScroll)。既只有当滚动到视图以内或接近视图的时候,才画出实际的dom。

网上能搜到很多实现的代码,基础的是,假设每一项都是登高(或等宽)的,高级一点的,支持每一项不等高的,也有不少相关的工具库,比如react-window

我在工作中遇到的一种情况是,不等高的虚拟列表中,每一项中的文本是已知时,需要给出每一项的高度,那该如何计算呢?

以此为例,我将做一个如下对话框的长列表:

那么重点就是计算文本将会占据的高度,那么可以用canvas

Step 1

首先整个蓝色box的宽度是可以通过样式设置计算出来的,再减去两边的padding,就可以得出文本这个element的宽度,我们将它定义为textWidth。然后查看文本的字体样式,包括:font-familyfont-sizefont-weightline-height。我的项目中,这些属性如下:

css 复制代码
{
  font-family: 'Roboto, xxx...';
  font-size: '12px';
  font-weight: 'lighter';
  line-height: 1.2;
}

Step 2

创建canvas,让canvas计算文本的宽度,此时这个canvas并不会显示出来,只是用来计算文本平铺成一行时能有多宽:

js 复制代码
const font = "lighter 12px Roboto";
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const { width: virtualTextWidth } = context.measureText(text);

Step 3

现在已知容器的宽度,和文本单行的宽度,文本在这个容器中会换行,此时word-breakbreak-word,便可以得出将会有多少行。由于换行时,会有多的空白,如下红框的地方:

我们此处假设平均留白宽度为40px。如果你要求非常的精准,那需要计算每个字母的宽度,计算在第几个字符时换行,也是能算出来的,但是太费时,这里我先用个平均值估算看看。

js 复制代码
const rows = virtualTextWidth / (textWidth - 40);

Step 4

如果上面的rows为1.02,说明刚刚超过一行多一点,那就是算两行了,每一行的高度是通过line-heightfont-size相乘得出的,由此可以得出高度了:

js 复制代码
const height = (1.2 * 12) * Math.ceil(rows);

总结

整个方法的代码如下:

js 复制代码
const getTextHeight = (textWidth: number, text: string) => {
    const font = "lighter 12px Roboto";
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.font = font;
    const { width: virtualTextWidth } = context.measureText(text);
    
    const rows = virtualTextWidth / (textWidth - 40);
    
    const height = (1.2 * 12) * Math.ceil(rows);
}

使用react-window的组件如下:

js 复制代码
getItemSize = (index: number) => {
    const text = comments[index];
    return getTextHeight(text);
}

<VariableSizeList
    {...otherProps}
    itemSize={getItemSize}
>
    {getListItem}
</VariableSizeList>

最终如愿做出了文中上方图中的效果。

相关推荐
excel22 分钟前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip1 小时前
JavaScript事件流
前端·javascript
小菜全1 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C1 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904271 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路1 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa1 小时前
HTML和CSS学习
前端·css·学习·html
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss1 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3