感謝導(dǎo)語(yǔ)：很多時(shí)候，我們可能會(huì)遇到一行內(nèi)容展示不下、文字需省略顯示得情況。這種情況很常見(jiàn)，那么我們?nèi)绾卫脷馀菰@示中繼器表格里得省略文字？本篇文章里便做了手把手解讀，一起來(lái)看看吧。
在系統(tǒng)表格中，經(jīng)常會(huì)遇到有些格子里得內(nèi)容很長(zhǎng)，如果全部顯示就會(huì)導(dǎo)致一頁(yè)看不完其他列得內(nèi)容，遇到這種情況，我們往往是只顯示長(zhǎng)內(nèi)容得前面部分，如果鼠標(biāo)移入得時(shí)候才會(huì)顯示全部?jī)?nèi)容。
這樣得好處一是可以一眼看完表格內(nèi)完整得內(nèi)容，二是如果想查看詳細(xì)得長(zhǎng)內(nèi)容，也可以通過(guò)鼠標(biāo)移入得方式查看。
所以今天感謝作者分享就教大家，如何用中繼器和氣泡元件實(shí)現(xiàn)這種顯示具體文字內(nèi)容得原型模板。
一、制作完成后應(yīng)具備以下效果- 在中繼器表格中導(dǎo)入文字，自動(dòng)在對(duì)應(yīng)元件上顯示文本內(nèi)容。如果文本較長(zhǎng)時(shí)，只顯示前面部分得內(nèi)容，后面自動(dòng)用省略號(hào)代替。鼠標(biāo)移入長(zhǎng)內(nèi)容時(shí)，顯示其他和對(duì)應(yīng)完整得文本內(nèi)容。。
原型地址：感謝分享39xb3u.axshare感謝原創(chuàng)分享者/#g=1
二、制作教程1. 表頭得制作表頭得制作比較簡(jiǎn)單，我們用矩形來(lái)制作即可，矩形得樣式根據(jù)需求偏好來(lái)調(diào)整即可。有多少列我們就用多少個(gè)矩形，如下圖所示擺放。
2. 表格內(nèi)容得制作制作表格內(nèi)容，我們主要用到得是中繼器和矩形。我們?cè)谥欣^器里放入對(duì)應(yīng)得矩形，這里矩形和上面得表頭得各個(gè)矩形得寬度應(yīng)該是一一對(duì)應(yīng)得，最后一列操作列我們用修改和刪除得文本代替即可，我們還要增加一個(gè)底部矩形作為背景，底部矩形設(shè)置懸停時(shí)淺藍(lán)色得交互樣式。
最后我們把中繼器內(nèi)部所有元件組合，勾選觸發(fā)鼠標(biāo)內(nèi)容交互樣式，這樣才可以有移入對(duì)應(yīng)行高亮變色得效果。
添加完元件后，我們?cè)谥欣^器表格里面增加列：
完成后我們就可以增加交互了首先我們用設(shè)置文本得交互，將中繼器里得值設(shè)置到對(duì)應(yīng)得元件里，例如矩形1，我們就設(shè)置他得文本值為item.Column1;矩形2，我們就設(shè)置他得文本值為item.Column2……以此類(lèi)推
然后我們就要加一個(gè)條件進(jìn)入了，我們以第四列內(nèi)容為例，因?yàn)榘咐兄挥械谒牧惺情L(zhǎng)內(nèi)容，所以我們添加一個(gè)條件，就是如果第四列表格中得字?jǐn)?shù)大于10，我們就設(shè)置他得文本為前十位內(nèi)容+……
這里設(shè)置條件是考慮到有可能他某一行里面沒(méi)有操作10個(gè)字得，那行就應(yīng)該全部顯示，所以我們?cè)黾恿诉@樣一個(gè)條件，當(dāng)然了如果你說(shuō)，你這列里面每一行都超過(guò)了10個(gè)字，那就可以不寫(xiě)條件。
這里面我們涉及到兩個(gè)行數(shù)，一個(gè)是length函數(shù)，就可以統(tǒng)計(jì)一段內(nèi)容里包含了多少個(gè)字符，所以我們得條件就是Item.Column4.length>10
如果這個(gè)條件成立，我們就要用設(shè)置文本得交互，首先我們要在這段內(nèi)容里面提取前面10個(gè)字符，這里設(shè)計(jì)到slice函數(shù)，就是可以對(duì)文本進(jìn)行切割，我們?nèi)?到10位，Item.Column4.slice(0,10)，這樣就取出來(lái)了，然后在后面再加上……提示用戶(hù)這是省略?xún)?nèi)容。
3. 氣泡得制作和交互我們新建一個(gè)矩形，鼠標(biāo)右鍵，選擇形狀，就可以選擇出氣泡得形狀，如下圖：
選擇形狀后，我們調(diào)整一下尺寸，已經(jīng)文字上下左右得邊距和對(duì)齊方式，默認(rèn)隱藏。
然后我們進(jìn)入中繼器，選中里面第四列得矩形，在里面增加交互：
鼠標(biāo)移入時(shí)：首先用顯示得交互，將氣泡框顯示出來(lái)，然后用移動(dòng)得事件，將氣泡框移動(dòng)到對(duì)應(yīng)得位置，這里我們要選到達(dá)，x軸得位置是不變得，他原本在哪里就填寫(xiě)在哪里，例如他原來(lái)是在200得橫坐標(biāo)，就填200。
關(guān)鍵是y軸得位置，我們要知道現(xiàn)在是在第幾行，這里用到item.index得函數(shù)就可以獲取到第幾行了，這里具體得y坐標(biāo)其實(shí)就是中繼器得y坐標(biāo)值-氣泡得高度+（所在行數(shù)-1）*表格每一行得高度。
例如中繼器在200得位置，氣泡高度是100，現(xiàn)在看得是第1行，那么氣泡應(yīng)該出現(xiàn)得y坐標(biāo)就是200-100=100，如果是第二行就要+35，如果是第三行就再加35。
可以看到，一般感謝作者分享都是喜歡寫(xiě)成函數(shù)得形式，不會(huì)寫(xiě)具體得數(shù)字，因?yàn)槿绻麑?xiě)得是數(shù)字，移動(dòng)位置，或者我們修改尺寸得時(shí)候就又要重新改這里得交互，就會(huì)很麻煩了，所以為了復(fù)用性，我都會(huì)寫(xiě)成函數(shù)得形式。如果你們理解不了函數(shù)，建議先寫(xiě)固定值，等效果出來(lái)了，理解了之后，在轉(zhuǎn)化為函數(shù)得形式。
鼠標(biāo)移入得最后我們還要把完整得文本值設(shè)置到氣泡里面，完整值其實(shí)一直記錄在中繼器表格里，我們用設(shè)置文本得交互，將item.Column4得值設(shè)置到氣泡里即可。
最后，在鼠標(biāo)移出時(shí)，我們用顯示隱藏得交互，將氣泡隱藏即可。
這樣我們就完成了用氣泡顯示中繼器表格里省略?xún)?nèi)容得原型模板了，下次使用時(shí)，我們只需要在中繼器表格里填寫(xiě)或?qū)胛淖?，即可自?dòng)生成交互，是不是很方便呢？感興趣得同學(xué)們可以動(dòng)手試試哦。
感謝由 等AI產(chǎn)品人 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
