摘要：之前做小程序开发时，遇到要实现过长文本进行的折叠的效果类型微信朋友圈那种。而最直接的文本过长判断标准，是文本行数超过某个值。总结以上，总结下小程序下文本过长折叠的思路文本过长由逻辑层判断字符数确定，控制全文按钮的展示与切换。
之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈那种）。主要交互有三点：
让文本过长时折叠、并显示一个“全文”的点击文本
当用户点击“全文”则会展开被折叠的文本，并切换该按钮为“收起”
对不过长的文本则正常显示
本质上，要实现这个效果得解决两个问题：
判断文本是否过长的标准
文本过长时样式如何折叠
判断文本是否过长所谓文本过长就是文本占据的高度太大，之所以要判断这个，是为了能告知逻辑层控制“全文”按钮的展示与切换。如果没这个交互，完全可忽略这个问题。
而最直接的文本过长判断标准，是文本行数超过某个值。在浏览器端，可通过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组件结尾加上
来实现分段。
以上，总结下小程序下文本过长折叠的思路：文本过长由逻辑层判断字符数确定，控制“全文”按钮的展示与切换。过长时应用-webkit-line-clamp样式折叠文本，再次展开文本只要撤销该样式。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112776.html
摘要：最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画即重力感应视差效果功能。最终实现的效果会有卡顿现象。如果是后台标签页面，重绘频率则会大大降低。较于，能得到更完整的加速的支持。 最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画（即重力感应视差效果）功能。结果发现微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画即重力感应视差效果功能。最终实现的效果会有卡顿现象。如果是后台标签页面，重绘频率则会大大降低。较于，能得到更完整的加速的支持。 最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画（即重力感应视差效果）功能。结果发现微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画即重力感应视差效果功能。最终实现的效果会有卡顿现象。如果是后台标签页面，重绘频率则会大大降低。较于，能得到更完整的加速的支持。 最近做微信小程序的开发时，想做一个靠感知手机方向，使页面上节点跟随移动的动画（即重力感应视差效果）功能。结果发现微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：微信小程序运维中心提供了错误日志记录，但功能还是比较有限。有时候一个微信小程序可能会用到多个第三方服务，从多个域名获取数据。要使用监控，你需要去网站注册账号并创建一个微信小程序监控项目，然后按照提示接入插件。 在微信小程序里，与后台服务器交互的主要接口函数是wx.request()，用于发起 HTTPS 网络请求。其重要性不言而喻。然而，却经常遇到请求失败的问题，笔者特意谷歌wx.re...
摘要：相对时间组件锚点组件面板分割组件分割线组件单元格组件相对时间组件用于表示几分钟前几小时前等相对于此时此刻的时间描述。单元格组件在手机上比较常见，在上则常用于固定的侧边菜单项。开发者社区这是发布会最劲爆的一款产品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我们成功地召开了 iView 3...
阅读 2772·2021-11-22 15:11
阅读 3536·2021-09-28 09:43
阅读 2887·2019-08-30 13:05
阅读 3429·2019-08-30 11:18
阅读 1445·2019-08-29 16:34
阅读 1298·2019-08-29 13:53
阅读 2905·2019-08-29 11:03
阅读 1656·2019-08-29 10:57
