首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

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

作者头像
知晓君
发布2018-07-26 17:47:24
1.4K0
发布2018-07-26 17:47:24
举报
文章被收录于专栏:知晓程序知晓程序

作者: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 组件)中了。那要怎么分段呢?

虽然小程序没有 <br> 这种东西,但好在其 text 组件支持转义字符。我们可以把每段输到一个 text 组件中,并在 text 组件结尾加上 \n 来实现分段。

最后的话

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

原文地址: https://juejin.im/post/5a19a1d7f265da430406520c

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-12-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档