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

2021-09-09 02:45:25 字數 1963 閱讀 8021

實現的方法千萬種。我來講一下我的實現思路:

2.根據索引的大小來判斷它是預設顯示還是隱藏。如果索引小於2就顯示,大於2就隱藏。至於顯示隱藏,我用的是class控制的。

**如下:

wxml:

<

view

class

="weui-cells mgt-0 }"

>

<

view

wx:for

="}"

wx:for-item

="item"

wx:for-index

="idx"

wx:key

=""class

="weui-cell }"

>

<

view

class

="weui-cell__bd ml-10"

>

<

text

class

='fs-30

block'

>nickname}

text

>

view

>

<

view

class

="weui-cell__ft fc-66 fs-28"

>

砍了

<

text

class

='fc-red'

>¥}

text

>

view

>

view

>

view

>

<

block

wx:if

="}"

>

<

view

wx:if

="}"

class

='fs-30

text-center pd10-15 fc-blue' bindtap

='listtoggle'

>

收起

<

icon

class

="shishuofont icon-list-close"

>

icon

>

view

>

<

view

wx:else class

='fs-30

text-center pd10-15 fc-blue' bindtap

='listtoggle'

>

<

icon

class

="shishuofont icon-list-open"

>

icon

>

view

>

block

>

js:主要的data資料:

data: ,
主要的方法:

listtoggle: function

() )

},

wxss:

.hiddenmore .more-item .showmore .more-item
最後看一下解析結果(請注意看下我標註紅色箭頭的地方,再結合wxss品味一下):

預設的狀態:

全部顯示的狀態:

路過的大神,如有更好的解決方案,可以多share share~~

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

1 文字超過n行顯示省略號 2 省略時,顯示 展開 收起 按鈕 3 文字不超過n行時,不顯示省略號和展開 收起按鈕 實現功能,記錄此次開發經驗,以便當做筆記查詢。實現思路 文字過長顯示省略號 展開和收起功能,通過css樣式即可實現 判斷是否顯示展開 收起按鈕 通過巢狀元素,可以實現text既顯示省略...

微信小程式分頁載入更多

lower threshold 100 設定觸底高度 true lower threshold 100 bindscrolltolower scrolltolower for wx for item item wx key title font color 特別事項 view text view b...

微信小程式 新增新屬性,動態展開收起檢視詳情

wxml部分 class data list class bg white wx for wx key item class data info mt10 border top bottom op active data idx bindtap expanddetail class op flex ...