开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!
2017年12月05日 20:08:29
来源:爱范儿
原标题:开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做! 小程序 1 分钟前 开发
原标题:开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!
小程序 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
样式折叠文本,再次展开文本只要撤销该样式。
- 好文
- 钦佩
- 喜欢
- 泪奔
- 可爱
- 思考
凤凰科技官方微信
视频
-
李咏珍贵私人照曝光:24岁结婚照甜蜜青涩
播放数:145391
-
金庸去世享年94岁,三版“小龙女”李若彤刘亦菲陈妍希悼念
播放数:3277
-
章泽天棒球写真旧照曝光 穿清华校服肤白貌美嫩出水
播放数:143449
-
老年痴呆男子走失10天 在离家1公里工地与工人同住
播放数:165128