网站建设问答小编今天给大家整合了一篇有关《微信小程序过长文本折叠效果的探索》的文章，关于微信小程序过长文本折叠效果的探索的详细内容欢迎往下阅读，下面就由小编一一给大家介绍，一起去了解吧！

　　之前做小程序开发时，遇到要实现过长文本进行的折叠的效果（类型微信朋友圈那种）。主要交互有三点：

　　让文本过长时折叠、并显示一个“全文”的点击文本

　　当用户点击“全文”则会展开被折叠的文本，并切换该按钮为“收起”

　　对不过长的文本则正常显示

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

　　判断文本是否过长的标准

　　文本过长时样式如何折叠

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

　　而最直接的文本过长判断标准，是文本行数超过某个值。在浏览器端，可通过DOM获取容器高度和文本的行高，来计算文本显示的行数；但小程序中并没有给js访问文本行数或组件高度的接口，我们无从获知行数过多告知逻辑层。

　　所以，只能退而求其次，采用字符数来作为文本过长的标准。至于多少字符算过长，可综合容器宽度、字符（中文字符会占两个英文字符宽度）、字体、字号，和设计师确认。但显然这种做法还有问题，比如遇到每行字符数很少时仍会显示许多行、而不进行文本过长的处理，违背我们折叠过长文本的初衷。

　　一个简单的思路是用行高算出一个固定的高度，只显示前几行，但该做法过于依赖样式的实现、不利于维护。在小程序中，我们可采用移动端页面开发中一个hack技术：，这个webkit内核私有的CSS属性用于设置留在容器中的文本行数，让其余的文本处于“溢出”状态。接下来只要结合和就能达到让过长的文本只显示前几行的效果，即“折叠”。

　　的使用有几个注意点：

　　兼容性。其在Chrome、Safari、QQ等webkit系浏览器都很可靠。而微信小程序的View渲染引擎WKWebView和X5也都是从webkit改过来的，兼容性有较好的保障

　　该属性有个使用前提：需在文本容器开启webkit浏览器私有的Flex布局—，并将设置子元素的排列方式为

　　该属性对行数的计算是依据inline元素来的，只会计算inline元素的行数

　　基于第三点，在涉及到文本分段时，为了实现按指定的行数折叠，就不能把每段输出到一个block元素（比如view组件）中了。那要怎么分段呢？虽然小程序没有这种东西，但好在其text组件支持转义字符，我们可以把每段输到一个text组件中，并在text组件结尾加上来实现分段。

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

  目前，《微信小程序过长文本折叠效果的探索》页面仍在完善中，后续将为您提供丰富、全面的关于《微信小程序过长文本折叠效果的探索》的最佳回答，小编将持续从百度问答、百度百科、搜狗问答、搜狗百科、微博问答、头条百科、悟空问答、知乎热门问答以及部分合作站点渠道收集和补充完善信息。

  深圳蚂蚁网络网站建设公司提供，系统定制，微信开发、小程序定制、微商城开发、网站建设、网站排名优化推广等互联网项目定制开发服务。版权声明：如发现内容存在版权问题，烦请提供相关信息发邮件至3310459304@qq.com，我们将及时沟通与处理。本站内容均来源于网络，涉及言论、版权与本站无关。