微信小程式選項卡功能

2022-09-16 04:24:11 字數 1053 閱讀 3583

原理呢,就是先布局好(這就不必說了吧),然後在上面的每乙個選項卡上都定義乙個同樣的點選事件,然後給每乙個元件上繫結乙個唯一的識別符號,然後點選事件觸發的時候,獲取到繫結的識別符號,判斷當前點選的是哪個選項卡,然後再判斷下面該顯示哪一塊,現在上**:

wxml:

<

view

class

="menu_box"

>

<

text

class

='menu1

}' data-current

="0"

catchtap

="menutap"

>menu1

text

>

<

text

class

='menu2

}' data-current

="1"

catchtap

="menutap"

>menu2

text

>

view

>

<

view

class

="tab1"

hidden

="}"

>tab1

view

>

<

view

class

="tab2"

hidden

="}"

>tab2

view

>

如果是迴圈列表

for='}' wx:key='this'>}

wxss:

.menu_box.menu1,.menu2.borders.tab1,.tab2.tab2
js:

data:, 

menutap:function

(e));

},

完結。

微信小程式 選項卡

選項卡 name one 聯盟view template name two 信仰view template name three 疾風view template class tab class title bindtap cuttab data curidx wx for wx for item t...

微信小程式 導航欄選項卡(MUI頂部選項卡)

已獲得賞金text data id 1 bindtap changetabbar class tui tabbar cell 賞金在路上text data id 2 bindtap changetabbar class tui tabbar cell 邀請失敗text view view class...

微信小程式之選項卡的實現方法

微信小程式之選項卡的實現方法 前言 從事前端的同學們一定不會對選項卡陌生,不管是自己原生寫的,還是各個ui框架裡帶的,我想大家都使用過很多選項卡,對選項卡的原理也足夠清楚了,下面我們來在微信小程式裡實現選項卡的功能。微信小程式裡沒有自帶選項卡元件,但是卻帶有swiper元件,所以,我們便利用swip...