开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧就能做！ ...
83 浏览量
2021-03-29
17:52:51
上传
评论
收藏 66KB PDF 举报
开发开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧小程序也能像朋友圈一样「折叠全文」？有了这个技巧
就能做！就能做！ ...
之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈的效果）。主要交互有三点：
让文本过长时折叠、并显示一个「全文」的点击文本
当用户点击「全文」则会展开被折叠的文本，并切换该按钮为「收起」
对不过长的文本则正常显示
本质上，要实现这个效果得解决两个问题：
判断文本是否过长
文本过长时，页面样式如何折叠
如何判断文本是否过长？
所谓「文本过长」，就是文本占据屏幕的高度太大。之所以要判断这个，是为了能告知逻辑层控制「全文」按钮的展示与切
换。如果没这个交互，完全可忽略这个问题。
最直接的文本过长判断标准，是文本行数超过某个值。在浏览器端，可通过 DOM 获取容器高度和文本的行高，来计算文本显
示的行数。
但小程序中，并没有给 JS 访问文本行数或组件高度的接口。我们无法从视图层获知行数过多的信息，并告知逻辑层。
所以，我们只能退而求其次，采用字符数来作为文本过长的标准。至于多少字符算过长，可综合容器宽度、字符（中文字符会
占两个英文字符宽度）、字体、字号，和设计师确认。
但显然这种做法还有问题。比如，遇到每行字符数很少却会显示许多行的情况（例如回车过多），系统就不会进行文本过长的
处理，违背我们折叠过长文本的初衷。
文本过长时，如何折叠？
一个简单的思路是用行高算出一个固定的高度，只显示前几行，但该做法过于依赖样式的实现、不利于维护。
在小程序中，我们可采用移动端页面开发中一个 hack 技术： -webkit-line-clamp 。这个 Webkit 内核私有的 CSS 属性，用于
设置留在容器中的文本行数，让其余的文本处于「溢出」状态。
接下来，只要结合 text-overflow: ellipsis; 和 overflow: hidden; ，就能达到让过长的文本只显示前几行的效果，即「折叠」效
果。
-webkit-line-clamp 的使用，有几个需要注意的点。
首先是兼容性。其在 Chrome、Safari、QQ 等 Webkit 系浏览器都很可靠。而微信小程序的 View 渲染引擎 WKWebView 和
X5 也都是从 Webkit 改过来的，兼容性有较好的保障。
另外，该属性有个使用前提：需在文本容器开启 Webkit 浏览器私有的 Flex 布局： display: webkit-box; ，并将设置子元素的
排列方式为 -webkit-box-orient: vertical; 。
同时，该属性对行数的计算是依据 inline 元素来的，只会计算 inline 元素的行数。
基于第三点，在涉及到文本分段时，为了实现按指定的行数折叠，就不能把每段输出到一个 block 元素（比如 view 组件）中
了。那要怎么分段呢？
虽然小程序没有
这种东西，但好在其 text 组件支持转义字符。我们可以把每段输到一个 text 组件中，并在 text 组件结尾加上来实现分段。
总结
以上，总结下小程序下文本过长折叠的思路：文本过长由逻辑层判断字符数确定，控制「全文」按钮的展示与切换。过长时应
用 -webkit-line-clamp 样式折叠文本，再次展开文本只要撤销该样式。
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿
用于商业用途，如果损害了您的权利，请联系网站客服处理。
资源评论
