資訊專欄INFORMATION COLUMN
摘要：之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進行的折疊的效果類型微信朋友圈那種。而最直接的文本過長判斷標準，是文本行數(shù)超過某個值。總結(jié)以上，總結(jié)下小程序下文本過長折疊的思路文本過長由邏輯層判斷字符數(shù)確定，控制全文按鈕的展示與切換。
之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進行的折疊的效果（類型微信朋友圈那種）。主要交互有三點：
讓文本過長時折疊、并顯示一個“全文”的點擊文本
當用戶點擊“全文”則會展開被折疊的文本，并切換該按鈕為“收起”
對不過長的文本則正常顯示
本質(zhì)上，要實現(xiàn)這個效果得解決兩個問題：
判斷文本是否過長的標準
文本過長時樣式如何折疊
判斷文本是否過長所謂文本過長就是文本占據(jù)的高度太大，之所以要判斷這個，是為了能告知邏輯層控制“全文”按鈕的展示與切換。如果沒這個交互，完全可忽略這個問題。
而最直接的文本過長判斷標準，是文本行數(shù)超過某個值。在瀏覽器端，可通過DOM獲取容器高度和文本的行高，來計算文本顯示的行數(shù)；但小程序中并沒有給js訪問文本行數(shù)或組件高度的接口，我們無從獲知行數(shù)過多告知邏輯層。
所以，只能退而求其次，采用字符數(shù)來作為文本過長的標準。至于多少字符算過長，可綜合容器寬度、字符（中文字符會占兩個英文字符寬度）、字體、字號，和設計師確認。但顯然這種做法還有問題，比如遇到每行字符數(shù)很少時仍會顯示許多行、而不進行文本過長的處理，違背我們折疊過長文本的初衷。
文本過長如何折疊一個簡單的思路是用行高算出一個固定的高度，只顯示前幾行，但該做法過于依賴樣式的實現(xiàn)、不利于維護。在小程序中，我們可采用移動端頁面開發(fā)中一個hack技術：-webkit-line-clamp，這個webkit內(nèi)核私有的CSS屬性用于設置留在容器中的文本行數(shù)，讓其余的文本處于“溢出”狀態(tài)。接下來只要結(jié)合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;
該屬性對行數(shù)的計算是依據(jù)inline元素來的，只會計算inline元素的行數(shù)
基于第三點，在涉及到文本分段時，為了實現(xiàn)按指定的行數(shù)折疊，就不能把每段輸出到一個block元素（比如view組件）中了。那要怎么分段呢？雖然小程序沒有
這種東西，但好在其text組件支持轉(zhuǎn)義字符，我們可以把每段輸?shù)揭粋€text組件中，并在text組件結(jié)尾加上
來實現(xiàn)分段。
以上，總結(jié)下小程序下文本過長折疊的思路：文本過長由邏輯層判斷字符數(shù)確定，控制“全文”按鈕的展示與切換。過長時應用-webkit-line-clamp樣式折疊文本，再次展開文本只要撤銷該樣式。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112776.html
摘要：最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫即重力感應視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫（即重力感應視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫即重力感應視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫（即重力感應視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫即重力感應視差效果功能。最終實現(xiàn)的效果會有卡頓現(xiàn)象。如果是后臺標簽頁面，重繪頻率則會大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開發(fā)時，想做一個靠感知手機方向，使頁面上節(jié)點跟隨移動的動畫（即重力感應視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...
摘要：微信小程序運維中心提供了錯誤日志記錄，但功能還是比較有限。有時候一個微信小程序可能會用到多個第三方服務，從多個域名獲取數(shù)據(jù)。要使用監(jiān)控，你需要去網(wǎng)站注冊賬號并創(chuàng)建一個微信小程序監(jiān)控項目，然后按照提示接入插件。 在微信小程序里，與后臺服務器交互的主要接口函數(shù)是wx.request()，用于發(fā)起 HTTPS 網(wǎng)絡請求。其重要性不言而喻。然而，卻經(jīng)常遇到請求失敗的問題，筆者特意谷歌wx.re...
摘要：相對時間組件錨點組件面板分割組件分割線組件單元格組件相對時間組件用于表示幾分鐘前幾小時前等相對于此時此刻的時間描述。單元格組件在手機上比較常見，在上則常用于固定的側(cè)邊菜單項。開發(fā)者社區(qū)這是發(fā)布會最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開了 iView 3...
閱讀 2773·2021-11-22 15:11
閱讀 3537·2021-09-28 09:43
閱讀 2888·2019-08-30 13:05
閱讀 3430·2019-08-30 11:18
閱讀 1446·2019-08-29 16:34
閱讀 1300·2019-08-29 13:53
閱讀 2907·2019-08-29 11:03
閱讀 1658·2019-08-29 10:57
