国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

微信小程序過(guò)長(zhǎng)文本折疊效果的探索

cocopeak / 1310人閱讀

摘要：之前做小程序開(kāi)發(fā)時(shí)，遇到要實(shí)現(xiàn)過(guò)長(zhǎng)文本進(jìn)行的折疊的效果類(lèi)型微信朋友圈那種。而最直接的文本過(guò)長(zhǎng)判斷標(biāo)準(zhǔn)，是文本行數(shù)超過(guò)某個(gè)值?？偨Y(jié)以上，總結(jié)下小程序下文本過(guò)長(zhǎng)折疊的思路文本過(guò)長(zhǎng)由邏輯層判斷字符數(shù)確定，控制全文按鈕的展示與切換。

之前做小程序開(kāi)發(fā)時(shí)，遇到要實(shí)現(xiàn)過(guò)長(zhǎng)文本進(jìn)行的折疊的效果（類(lèi)型微信朋友圈那種）。主要交互有三點(diǎn)：

讓文本過(guò)長(zhǎng)時(shí)折疊、并顯示一個(gè)“全文”的點(diǎn)擊文本

當(dāng)用戶(hù)點(diǎn)擊“全文”則會(huì)展開(kāi)被折疊的文本，并切換該按鈕為“收起”

對(duì)不過(guò)長(zhǎng)的文本則正常顯示

本質(zhì)上，要實(shí)現(xiàn)這個(gè)效果得解決兩個(gè)問(wèn)題：

判斷文本是否過(guò)長(zhǎng)的標(biāo)準(zhǔn)

文本過(guò)長(zhǎng)時(shí)樣式如何折疊

判斷文本是否過(guò)長(zhǎng)

所謂文本過(guò)長(zhǎng)就是文本占據(jù)的高度太大，之所以要判斷這個(gè)，是為了能告知邏輯層控制“全文”按鈕的展示與切換。如果沒(méi)這個(gè)交互，完全可忽略這個(gè)問(wèn)題。

而最直接的文本過(guò)長(zhǎng)判斷標(biāo)準(zhǔn)，是文本行數(shù)超過(guò)某個(gè)值。在瀏覽器端，可通過(guò)DOM獲取容器高度和文本的行高，來(lái)計(jì)算文本顯示的行數(shù)；但小程序中并沒(méi)有給js訪問(wèn)文本行數(shù)或組件高度的接口，我們無(wú)從獲知行數(shù)過(guò)多告知邏輯層。

所以，只能退而求其次，采用字符數(shù)來(lái)作為文本過(guò)長(zhǎng)的標(biāo)準(zhǔn)。至于多少字符算過(guò)長(zhǎng)，可綜合容器寬度、字符（中文字符會(huì)占兩個(gè)英文字符寬度）、字體、字號(hào)，和設(shè)計(jì)師確認(rèn)。但顯然這種做法還有問(wèn)題，比如遇到每行字符數(shù)很少時(shí)仍會(huì)顯示許多行、而不進(jìn)行文本過(guò)長(zhǎng)的處理，違背我們折疊過(guò)長(zhǎng)文本的初衷。

文本過(guò)長(zhǎng)如何折疊

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

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

兼容性。其在Chrome、Safari、QQ等webkit系瀏覽器都很可靠。而微信小程序的View渲染引擎WKWebView和X5也都是從webkit改過(guò)來(lái)的，兼容性有較好的保障

該屬性有個(gè)使用前提：需在文本容器開(kāi)啟webkit瀏覽器私有的Flex布局---display: webkit-box;，并將設(shè)置子元素的排列方式為-webkit-box-orient: vertical;

該屬性對(duì)行數(shù)的計(jì)算是依據(jù)inline元素來(lái)的，只會(huì)計(jì)算inline元素的行數(shù)

基于第三點(diǎn)，在涉及到文本分段時(shí)，為了實(shí)現(xiàn)按指定的行數(shù)折疊，就不能把每段輸出到一個(gè)block元素（比如view組件）中了。那要怎么分段呢？雖然小程序沒(méi)有
這種東西，但好在其text組件支持轉(zhuǎn)義字符，我們可以把每段輸?shù)揭粋€(gè)text組件中，并在text組件結(jié)尾加上 來(lái)實(shí)現(xiàn)分段。

總結(jié)

以上，總結(jié)下小程序下文本過(guò)長(zhǎng)折疊的思路：文本過(guò)長(zhǎng)由邏輯層判斷字符數(shù)確定，控制“全文”按鈕的展示與切換。過(guò)長(zhǎng)時(shí)應(yīng)用-webkit-line-clamp樣式折疊文本，再次展開(kāi)文本只要撤銷(xiāo)該樣式。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112776.html

相關(guān)文章

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    JinB 評(píng)論0 收藏0

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    sarva 評(píng)論0 收藏0

  • 從微信小程序重力感應(yīng)API到requestAnimationFrame探索實(shí)現(xiàn)

    摘要：最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)即重力感應(yīng)視差效果功能。最終實(shí)現(xiàn)的效果會(huì)有卡頓現(xiàn)象。如果是后臺(tái)標(biāo)簽頁(yè)面，重繪頻率則會(huì)大大降低。較于，能得到更完整的加速的支持。 最近做微信小程序的開(kāi)發(fā)時(shí)，想做一個(gè)靠感知手機(jī)方向，使頁(yè)面上節(jié)點(diǎn)跟隨移動(dòng)的動(dòng)畫(huà)（即重力感應(yīng)視差效果）功能。結(jié)果發(fā)現(xiàn)微信小程序有一些坑： 微信小程序不支持html5的DeviceOrie...

    soasme 評(píng)論0 收藏0

  • 監(jiān)控微信小程序wx.request請(qǐng)求失敗

    摘要：微信小程序運(yùn)維中心提供了錯(cuò)誤日志記錄，但功能還是比較有限。有時(shí)候一個(gè)微信小程序可能會(huì)用到多個(gè)第三方服務(wù)，從多個(gè)域名獲取數(shù)據(jù)。要使用監(jiān)控，你需要去網(wǎng)站注冊(cè)賬號(hào)并創(chuàng)建一個(gè)微信小程序監(jiān)控項(xiàng)目，然后按照提示接入插件。 在微信小程序里，與后臺(tái)服務(wù)器交互的主要接口函數(shù)是wx.request()，用于發(fā)起 HTTPS 網(wǎng)絡(luò)請(qǐng)求。其重要性不言而喻。然而，卻經(jīng)常遇到請(qǐng)求失敗的問(wèn)題，筆者特意谷歌wx.re...

    lpjustdoit 評(píng)論0 收藏0

  • iView 發(fā)布 3.0 版本，以及開(kāi)發(fā)者社區(qū)等 5 款新產(chǎn)品

    摘要：相對(duì)時(shí)間組件錨點(diǎn)組件面板分割組件分割線(xiàn)組件單元格組件相對(duì)時(shí)間組件用于表示幾分鐘前幾小時(shí)前等相對(duì)于此時(shí)此刻的時(shí)間描述。單元格組件在手機(jī)上比較常見(jiàn)，在上則常用于固定的側(cè)邊菜單項(xiàng)。開(kāi)發(fā)者社區(qū)這是發(fā)布會(huì)最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開(kāi)了 iView 3...

    FreeZinG 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<