• 中华龙舟如何奋楫争先?习近平这些话要牢记 2019-08-17
  • 北京警方发布端午旅游防骗提示:警惕连环设套忽悠购物 2019-08-17
  • 两岸民心相亲不可违逆(观沧海) 2019-07-22
  • 前5个月全国“卖地”收入突破2.2万亿元 同比增45.9% 2019-07-14
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-07-14
  • 推动生态文明建设迈上新台阶——全国生态环境保护大会释放四大新信号 2019-07-02
  • 五大特色看今秋教材变脸 端保温杯的中年男更关注? 2019-06-25
  • 网约车谨防四类风险 小心遗落手机被司机私自转账 2019-06-22
  • 湖北“无臂大学生”放弃留校机会 创业成IT公司老板 2019-05-14
  • 河北一保时捷车主疑遭枪击 警方悬赏9万元通缉 2019-05-13
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-13
  • 历史的沉渣再翻滚也掀不起大浪。 2019-05-12
  • 我老张工经历过中国计划经济时代,实践过计划经济,岂能不知计划经济?!现在的市场经济,我也有了实践感受。比较之,深感计划经济是适合社会主义的,而市场经济是不适合社 2019-05-12
  • 2019款沃尔沃S60高性能版官图发布 本月20号正式亮相 2019-05-03
  • 5月国民经济主要数据公布 下半年走势如何 2019-04-28
  • 四川快乐十二

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

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

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

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

    如何判断文本是否过长?

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

    最直接的文本过长判断标准,是文本行数超过某个值。在浏览器端,可通过 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 样式折叠文本,再次展开文本只要撤销该样式。


     

    秒度科技

    新闻中心

    2018-10-10


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

  • 中华龙舟如何奋楫争先?习近平这些话要牢记 2019-08-17
  • 北京警方发布端午旅游防骗提示:警惕连环设套忽悠购物 2019-08-17
  • 两岸民心相亲不可违逆(观沧海) 2019-07-22
  • 前5个月全国“卖地”收入突破2.2万亿元 同比增45.9% 2019-07-14
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-07-14
  • 推动生态文明建设迈上新台阶——全国生态环境保护大会释放四大新信号 2019-07-02
  • 五大特色看今秋教材变脸 端保温杯的中年男更关注? 2019-06-25
  • 网约车谨防四类风险 小心遗落手机被司机私自转账 2019-06-22
  • 湖北“无臂大学生”放弃留校机会 创业成IT公司老板 2019-05-14
  • 河北一保时捷车主疑遭枪击 警方悬赏9万元通缉 2019-05-13
  • 这个问题,不是我们那些学者所讲的,国家崛起美国害怕了。而是美国舞着大棒,配合国内的资本共同讹诈。 2019-05-13
  • 历史的沉渣再翻滚也掀不起大浪。 2019-05-12
  • 我老张工经历过中国计划经济时代,实践过计划经济,岂能不知计划经济?!现在的市场经济,我也有了实践感受。比较之,深感计划经济是适合社会主义的,而市场经济是不适合社 2019-05-12
  • 2019款沃尔沃S60高性能版官图发布 本月20号正式亮相 2019-05-03
  • 5月国民经济主要数据公布 下半年走势如何 2019-04-28
  • 老时时彩出号走势图百度 波叔一波中特随时查看 体彩排列3试机号 中国竞彩网500爱彩网 宁夏11选5购买 澳门快三计划网页版 双色球基本走势图带连线 北单能买比分吗 搜狐彩票频道 陕西快乐十分怎么下载 500彩票网是合法的吗 七乐彩开奖查询结果 四川快乐12开奖公告 必中平特 一路发百人牛牛