資訊專欄INFORMATION COLUMN
摘要：之前做小程序開發時，遇到要實現過長文本進行的折疊的效果類型微信朋友圈那種。而最直接的文本過長判斷標準，是文本行數超過某個值。總結以上，總結下小程序下文本過長折疊的思路文本過長由邏輯層判斷字符數確定，控制全文按鈕的展示與切換。
之前做小程序開發時，遇到要實現過長文本進行的折疊的效果（類型微信朋友圈那種）。主要交互有三點：
讓文本過長時折疊、并顯示一個“全文”的點擊文本
當用戶點擊“全文”則會展開被折疊的文本，并切換該按鈕為“收起”
對不過長的文本則正常顯示
本質上，要實現這個效果得解決兩個問題：
判斷文本是否過長的標準
文本過長時樣式如何折疊
判斷文本是否過長所謂文本過長就是文本占據的高度太大，之所以要判斷這個，是為了能告知邏輯層控制“全文”按鈕的展示與切換。如果沒這個交互，完全可忽略這個問題。
而最直接的文本過長判斷標準，是文本行數超過某個值。在瀏覽器端，可通過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樣式折疊文本，再次展開文本只要撤銷該樣式。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/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...
閱讀 3038·2021-11-22 15:11
閱讀 3815·2021-09-28 09:43
閱讀 3036·2019-08-30 13:05
閱讀 3582·2019-08-30 11:18
閱讀 1613·2019-08-29 16:34
閱讀 1587·2019-08-29 13:53
閱讀 3119·2019-08-29 11:03
閱讀 1881·2019-08-29 10:57
