揭秘微信小程序多行文本“展开收起”背后的技术巧思

前端

2023-12-26 07:10:57

多行文本在微信小程序中的应用

微信小程序中，多行文本的呈现有着广泛的应用场景，如新闻资讯、产品介绍、用户评论等。然而，如何在有限的屏幕空间内优雅地展示过多文本内容，一直是UI设计中的一个挑战。

“展开收起”功能的巧妙设计

针对多行文本展示问题，微信小程序设计了“展开收起”功能。默认情况下，只显示限定行数的文本内容，超出的部分以省略号“...”结尾，右侧附有“展开”按钮。点击按钮后，文本内容完全展开，按钮变为“收起”。

UI设计上的精妙考量

“展开收起”功能的UI设计体现了精湛的考量：

默认展示行数恰到好处： 既保证了信息的可读性，又避免了冗长的文本造成视觉疲劳。
展开按钮位置和大小： 按钮巧妙地环绕在文字右下角，既方便点击，又不影响文本阅读。
按钮状态反馈清晰： 展开后按钮变为“收起”，用户能明确感知当前文本状态。

前端开发中的技术实现

“展开收起”功能的实现涉及以下前端开发技术：

动态样式控制： 通过JavaScript控制文本展示高度，实现展开和收起效果。
按钮事件监听： 监听展开按钮点击事件，触发文本状态切换。
DOM操作： 更新DOM结构，修改按钮文本和文本展示高度。

剖析关键代码逻辑

以下代码片段展示了实现“展开收起”功能的关键逻辑：

const text = document.getElementById("text");
const button = document.getElementById("button");

button.addEventListener("click", () => {
  if (text.style.overflow === "hidden") {
    text.style.overflow = "visible";
    button.innerText = "收起";
  } else {
    text.style.overflow = "hidden";
    button.innerText = "展开";
  }
});