微信小程序過長文本折疊效果的(de)探索

發表時(shí)間：2021-3-31

發布人(rén)：融晨科技

浏覽次數：99

之(zhī)前做小程序開發時(shí)，遇到(dào)要(yào / yāo)實現過長文本進行的(de)折疊的(de)效果（類型微信朋友圈那種）。主要(yào / yāo)交互有三點：

讓文本過長時(shí)折疊、并顯示一個(gè)“全文”的(de)點擊文本
當用戶點擊“全文”則會展開被折疊的(de)文本，并切換該按鈕爲(wéi / wèi)“收起”
對不(bù)過長的(de)文本則正常顯示

本質上(shàng)，要(yào / yāo)實現這(zhè)個(gè)效果得解決兩個(gè)問題：

判斷文本是(shì)否過長的(de)标準
文本過長時(shí)樣式如何折疊

判斷文本是(shì)否過長

所謂文本過長就(jiù)是(shì)文本占據的(de)高度太大(dà)，之(zhī)所以(yǐ)要(yào / yāo)判斷這(zhè)個(gè)，是(shì)爲(wéi / wèi)了(le／liǎo)能告知邏輯層控制“全文”按鈕的(de)展示與切換。如果沒這(zhè)個(gè)交互，完全可忽略這(zhè)個(gè)問題。

而(ér)最直接的(de)文本過長判斷标準，是(shì)文本行數超過某個(gè)值。在(zài)浏覽器端，可通過DOM獲取容器高度和(hé / huò)文本的(de)行高，來(lái)計算文本顯示的(de)行數；但小程序中并沒有給js訪問文本行數或組件高度的(de)接口，我們無從獲知行數過多告知邏輯層。

所以(yǐ)，隻能退而(ér)求其次，采用字符數來(lái)作爲(wéi / wèi)文本過長的(de)标準。至于(yú)多少字符算過長，可綜合容器寬度、字符（中文字符會占兩個(gè)英文字符寬度）、字體、字号，和(hé / huò)設計師确認。但顯然這(zhè)種做法還有問題，比如遇到(dào)每行字符數很少時(shí)仍會顯示許多行、而(ér)不(bù)進行文本過長的(de)處理，違背我們折疊過長文本的(de)初衷。

文本過長如何折疊

一個(gè)簡單的(de)思路是(shì)用行高算出(chū)一個(gè)固定的(de)高度，隻顯示前幾行，但該做法過于(yú)依賴樣式的(de)實現、不(bù)利于(yú)維護。在(zài)小程序中，我們可采用移動端頁面開發中一個(gè)hack技術：-webkit-line-clamp，這(zhè)個(gè)webkit内核私有的(de)CSS屬性用于(yú)設置留在(zài)容器中的(de)文本行數，讓其餘的(de)文本處于(yú)“溢出(chū)”狀态。接下來(lái)隻要(yào / yāo)結合text-overflow: ellipsis;和(hé / huò)overflow: hidden;就(jiù)能達到(dào)讓過長的(de)文本隻顯示前幾行的(de)效果，即“折疊”。

-webkit-line-clamp的(de)使用有幾個(gè)注意點：

兼容性。其在(zài)Chrome、Safari、QQ等webkit系浏覽器都很可靠。而(ér)微信小程序的(de)View渲染引擎WKWebView和(hé / huò)X5也(yě)都是(shì)從webkit改過來(lái)的(de)，兼容性有較好的(de)保障
該屬性有個(gè)使用前提：需在(zài)文本容器開啓webkit浏覽器私有的(de)Flex布局—display: webkit-box;，并将設置子(zǐ)元素的(de)排列方式爲(wéi / wèi)-webkit-box-orient: vertical;
該屬性對行數的(de)計算是(shì)依據inline元素來(lái)的(de)，隻會計算inline元素的(de)行數

基于(yú)第三點，在(zài)涉及到(dào)文本分段時(shí)，爲(wéi / wèi)了(le／liǎo)實現按指定的(de)行數折疊，就(jiù)不(bù)能把每段輸出(chū)到(dào)一個(gè)block元素（比如view組件）中了(le／liǎo)。那要(yào / yāo)怎麽分段呢？雖然小程序沒有<br>這(zhè)種東西，但好在(zài)其text組件支持轉義字符，我們可以(yǐ)把每段輸到(dào)一個(gè)text組件中，并在(zài)text組件結尾加上(shàng)\n來(lái)實現分段。