多層展開 收起列表小程式操作

2022-09-24 00:21:08 字數 978 閱讀 4390

看到乙個需求,對一些前端小白或者剛開始寫小程式的人來說,可能會有點幫助,效果如下:

就是以上效果,廢話不多說,上**

wxml:

然後wxss:

page

.list_name_box

.list_item_name

.icon_down

/* .list_item_box

.list_item_box_show */

.list_item_name_box

.other

.icon_down_rotate

js:// pages/dome/dome.js

page(, , ]

}, , , ]

}, , , ]}]

},//點選最外層列表展開收起

listtap(e)

this.setdata();

},//點選裡面的子列表展開收起

listitemtap(e){

let parentindex = e.currenttarget.dataset.parentindex,//點選的內層所在的最外層列表下標

index=e.currenttarget.dataset.index,//點選的內層下標

list=this.data.list;

console.log(list[parentindex].item,index);

list[parentindex].item[index].show = !list[parentindex].item[index].show||false;//變換其開啟、關閉的狀態

if (list[parentindex].item[index].show){//如果是操作的開啟狀態,那麼就讓同級的其他列表變為關閉狀態,保持始終只有乙個開啟

for (let i = 0, len = list[parentindex].item.length;i

完結。有什麼好的意見或建議,請留言.

小程式 列表超出範圍可展開收起功能

由於設計專案的頁面,乙個列表裡面文字太過於長,也影響頁面美觀,所以不少軟體都有展開收起這個小功能。1.文字超出設定行數後隱藏,然後顯示省略號.2.可點選展開看隱藏的文字內容,也可以收起。如圖 wxml scroll view class page view class list wx for wx ...

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

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

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

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 ...