用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序过长文本折叠效果的探索

Rolan 2017-11-28 00:08

之前做小程序开发时,遇到要实现过长文本进行的折叠的效果(类型微信朋友圈那种)。主要交互有三点:让文本过长时折叠、并显示一个“全文”的点击文本当用户点击“全文”则会展开被折叠的文本,并切换该按钮为“收起 ...

之前做小程序开发时,遇到要实现过长文本进行的折叠的效果(类型微信朋友圈那种)。主要交互有三点:

  1. 让文本过长时折叠、并显示一个“全文”的点击文本
  2. 当用户点击“全文”则会展开被折叠的文本,并切换该按钮为“收起”
  3. 对不过长的文本则正常显示

本质上,要实现这个效果得解决两个问题:

  • 判断文本是否过长的标准
  • 文本过长时样式如何折叠

判断文本是否过长

所谓文本过长就是文本占据的高度太大,之所以要判断这个,是为了能告知逻辑层控制“全文”按钮的展示与切换。如果没这个交互,完全可忽略这个问题。

而最直接的文本过长判断标准,是文本行数超过某个值。在浏览器端,可通过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组件)中了。那要怎么分段呢?虽然小程序没有<br>这种东西,但好在其text组件支持转义字符,我们可以把每段输到一个text组件中,并在text组件结尾加上\n来实现分段。

总结

以上,总结下小程序下文本过长折叠的思路:文本过长由逻辑层判断字符数确定,控制“全文”按钮的展示与切换。过长时应用-webkit-line-clamp样式折叠文本,再次展开文本只要撤销该样式。


鲜花
鲜花 (1)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: LevonLin 来自: 掘金

相关阅读