vant折疊面板默認(rèn)展開(kāi)

最近做項(xiàng)目有個(gè)需求

讓所有的vant組件庫(kù)中的折疊面板van-collapse-item全部打開(kāi)，collapse折疊面板是嵌入在van-tab中的。

之前通過(guò)查資料，發(fā)現(xiàn)只要這兩個(gè)值一樣就能將面板默認(rèn)置為打開(kāi)。

注意：van-collapse中綁定的activeName不是一個(gè)數(shù)組就會(huì)報(bào)錯(cuò)

這里因?yàn)樯厦娼壎ǘ际莿?dòng)態(tài)的，所以我們不能給activeName寫(xiě)死某個(gè)值，那么循環(huán)把所有title放到activeName數(shù)組里。

通過(guò)給activeName的賦值處理，就能讓activeName的值和guideTitle的每一項(xiàng)title值都有了，并且綁定的值保持了一致。這樣的話就可以默認(rèn)折疊面板都打開(kāi)了。

以上是動(dòng)態(tài)的name綁定的寫(xiě)法。

那么還有一種方法是寫(xiě)死的name值，也可以默認(rèn)全部打開(kāi)：

此時(shí)這里的name前面沒(méi)有冒號(hào)，說(shuō)明綁定的是一個(gè)固定的字符串‘index’，那么只要title中綁定的名字和name的字符串一致，就是默認(rèn)展開(kāi)此面板，又由于這是一個(gè)for循環(huán)的面板，故所有的面板的名字是一致的，也就是默認(rèn)全部展開(kāi)（注：這里仍然用的是數(shù)組格式）

我查資料的時(shí)候還發(fā)現(xiàn)可以只把折疊面板的某一項(xiàng)打開(kāi)

這里的title名字是自己定義的。綁定的值為name的值。由于這是一個(gè)循環(huán)嵌套的面板，故而綁定時(shí)需要用一個(gè)數(shù)組格式來(lái)接收。

注意：name前面有冒號(hào)，說(shuō)明后面是一個(gè)變量或者表達(dá)式，沒(méi)加冒號(hào)就是固定的字符串

給title聲明變量，并默認(rèn)第一個(gè)面板展開(kāi)

這里的原理跟上面一致，都是綁定的title和動(dòng)態(tài)name值一致即可。

vant點(diǎn)擊圖標(biāo)展開(kāi)收縮

效果圖如上，下面是用table來(lái)布局的，table返回字段有isShow顯示該行，否則沒(méi)有隱藏行，點(diǎn)擊icon圖標(biāo)對(duì)table進(jìn)行展開(kāi)隱藏操作。

附加：table-row解決tr的display為block時(shí)串行 。。。

數(shù)據(jù)格式：

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論