开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧就

2017-12-08 15:41:06 阅读：535 作者：子龙 来源：巨推传媒 分类：小程序开发

开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧就能做！

原标题：开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧就能做！

小程序 1 分钟前 开发 | 小程序也能像朋友圈一样「折叠全文」？有了这个技巧就能做！ - SHARES分享到微信 使用微信扫码将网页分享到微信 前端开发 小程序开发 开发 微信小程序 文本折叠

- -

文 | LevonLin

之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈的效果）。主要交互有三点：

• 让文本过长时折叠、并显示一个「全文」的点击文本
• 当用户点击「全文」则会展开被折叠的文本，并切换该按钮为「收起」
• 对不过长的文本则正常显示

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

• 判断文本是否过长
• 文本过长时，页面样式如何折叠

如何判断文本是否过长？

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

最直接的文本过长判断标准，是文本行数超过某个值。在浏览器端，可通过 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 组件结尾加上 \n 来实现分段。

总结

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

微信开发 微信 小程序开发 WebKit

上一篇：微信小程序开发完工+问题汇总 下一篇：新互联网的时代，产品经理新的破局

更多推荐

• 
  小程序开发 定制微商城分销系统 微信分销平台不单单是为了做好网络营销，其实在面对营销的时候更多的时候离不开市场，所以这个时候应该明确的就是微信分销应该做好具体的市场营销工作。一起来看看该怎么做...

  2019-03-21 17:28:12 2668

• 
  小程序开发 微商城有多种销售方式，让你快速实现分销 一、微商城有多种销售方式，让你快速实现分销 1、微商城采用主店无数分店的模式，让企业拉动与分销商之间在订单协作、商品信息、库存管理、渠道沟通等业务环节的紧密协作...

  2019-03-21 17:27:07 2949

• 
  小程序开发 企业进行微信小程序开发的好处有哪些呢？ 目前， 微信 小程序 开发 呈现出 持续火热 的状态 ，越来越多的商家开始关注并开发自己的小程序， 但是，我们也看到，还有一部分的 商家 持观望的态度，不知道是...

  2019-03-21 17:25:57 3047

• 
  小程序开发 企业如何发挥微信小程序的作用呢？ 现在， 微信小程序 成为了企业在进行微信营销时又一个有效的方式，许多企业通过 微信小程序 开发的方式建立起微信上的营销覆盖网络，但是，有些企业在开发小程序之后，...

  2019-03-21 17:24:53 2953

• 
  小程序开发 企业进行微信小程序开发后能够赚钱吗？ 微信小程序 对于许多企业的发展是有助力作用的，因此，现在 许多公司在小程序出现已经开始申请自己的账号，一些提前开始运营 微信小程序 的公司已经取得了不错的成绩，...

  2019-03-21 17:23:46 3021