微信小程式文字檢視更多和收起

1、文字超過n行顯示省略號

2、省略時，顯示 展開/收起 按鈕

3、文字不超過n行時，不顯示省略號和展開/收起按鈕

實現功能，記錄此次開發經驗，以便當做筆記查詢。

實現思路：

文字過長顯示省略號、展開和收起功能，通過css樣式即可實現

判斷是否顯示展開/收起按鈕：

通過巢狀元素，可以實現text既顯示省略號，其高度又是全顯示時的高度

通過selectorquery選擇器，獲取view及其父元素的高度，判斷view高度是否超過其父元素高度，決定是否顯示展開/收起按鈕即可

結構

="describe"

>
='}'
>
}<
/view>
<
/view>
"}"class
='readmore-tip' bindtap=
'toggle'
>
}<
/view>
<
/view>

css，給文字設定行高，方便計算文字行數

.content

.content view
/* 超出3行隱藏多餘部分並且顯示省略號 */
.hidden
.readmore-tip

獲取資料，把資料全部渲染；獲取當前文字的高度，除以行高計算行數，超過三行則隱藏

data:

,  colnum:0,
colnumshow:
true
,  introduce:"我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容
我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容"},
onload:
function
(options)
,getdata()
})}else)}
self.
setdata()
},//切換
toggle()
})},

微信小程式 收起和檢視更多功能

實現的方法千萬種。我來講一下我的實現思路 2.根據索引的大小來判斷它是預設顯示還是隱藏。如果索引小於2就顯示，大於2就隱藏。至於顯示隱藏，我用的是class控制的。如下 wxml view class weui cells mgt 0 view wx for wx for item item wx ...

微信小程式 文字的展開與收起

詳細 style v2 sitemaplocation sitemap.json class container class title 今日天氣view class content 氣象台11月18日6時發布暴雪橙色預警，預計，11月18日08時至19日08時，黑龍江東南部 吉林西部和北部 遼寧西...

微信小程式 文字跑馬燈

效果 1 顯示完後再顯示view class example class marquee box class marquee text style px font size px view view view 2 出現白邊後即顯示view class example class marquee bo...