實現的方法千萬種。我來講一下我的實現思路:
2.根據索引的大小來判斷它是預設顯示還是隱藏。如果索引小於2就顯示,大於2就隱藏。至於顯示隱藏,我用的是class控制的。
**如下:
wxml:
<js:主要的data資料: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
>
data: ,主要的方法:
listtoggle: functionwxss:() )
},
.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 ...