最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

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

Rolan 2017-12-6 00:10

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

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

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

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

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

如何判断文本是否过长?

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

最直接的文本过长判断标准,是文本行数超过某个值。在浏览器端,可通过 DOM 获取容器高度和文本的行高,来计算文本显示的行数。

但小程序中,并没有给 JS 访问文本行数或组件高度的接口。我们无法从视图层获知行数过多的信息,并告知逻辑层。

所以,我们只能退而求其次,采用字符数来作为文本过长的标准。至于多少字符算过长,可综合容器宽度、字符(中文字符会占两个英文字符宽度)、字体、字号,和设计师确认。

但显然这种做法还有问题。比如,遇到每行字符数很少却会显示许多行的情况(例如回车过多),系统就不会进行文本过长的处理,违背我们折叠过长文本的初衷。

文本过长时,如何折叠?

一个简单的思路是用行高算出一个固定的高度,只显示前几行,但该做法过于?#35272;?#26679;式的实现、不利于维护。

在小程序中,我们可采用移动端页面开发中一个 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 组件)中了。那要怎么分?#25991;兀?/p>

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

总结

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 :
收藏
原作者: 凤凰科技 来自: 推酷

相关阅读

  • 开发工具 2018-9-29 15:47
    《微信小程序自动切片生成布局软件》原来?#20013;?#30340;这部分工作,可以用切片软件的方法来?#23567;?#20999;好后,可以自动生成wxml,wcss,js文件。
    效果图上的文字可以通过自动文?#36136;?#21035;识别出来,提高录入的速度,减轻工作量。
    设计好的切片文件可以存档,以便下次需要的时候拿来重新编辑。只要有切片文件在,换了程序也可以修改和编辑。
    有任?#25105;?#38382;欢迎随时联系我们!
    Q  Q : 348961183
    如有打扰,请谅解!
    勿喷!谢谢!
新时时彩软件
刀塔自走棋花呗啥意思 e世博快乐8 如何提高贵州麻将技术 呼噜噜爱上乡下电子 三国全面战争1.9c秘籍 魂斗罗归来手游下载免费 发达啰彩金 中彩网开奖数据双色球开奖结果 pk10开奖结果统计 时时彩缩水软件在线 l重庆时时彩走势图 逐鹿三国之双龙传