背景：前段時間寫了乙個搶紅包小程式，裡面涉及到了頂部選項卡，把它抽了出來。
效果圖：
下面直接上**:
wxml:
程式設計客棧">
程式設計客棧
class="item }"
bindtap="n**bartab" wx:key="unique">}
zcivdkn="}">
wxss:zcivdk
.n**bar
.n**bar .item
.n**bar .item.active
.n**bar .item.active::after
js:data: ,
n**bartab: function (e) );
},以上是實現過程基本**，省去了中間內容的**。頂部個數是迴圈出來的，可以根據自己的實際需求設定。
本文標題: 微信小程式實現頂部普通選項卡效果(非swiper)
本文位址:
微信小程式 導航欄選項卡（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...
微信小程式 選項卡
選項卡 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...
微信小程式選項卡功能
原理呢，就是先布局好 這就不必說了吧 然後在上面的每乙個選項卡上都定義乙個同樣的點選事件，然後給每乙個元件上繫結乙個唯一的識別符號，然後點選事件觸發的時候，獲取到繫結的識別符號，判斷當前點選的是哪個選項卡，然後再判斷下面該顯示哪一塊，現在上 wxml view class menu box text...