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

渲染长列表时,要想性能好,需要用到虚拟滚动(有时候也叫虚拟列表,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>

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

相关推荐
lijun_xiao20092 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔2 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼2 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder2 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔2 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔2 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀2 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP3 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost3 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙3 小时前
/dev/null 是什么,有什么用途?
前端·chrome