WeChat Development Praktische obere Navigationsleiste (Registerkarte)

In diesem Artikel wird hauptsächlich der relevante Code der oberen Navigationsleiste des WeChat-Miniprogramms ausführlich vorgestellt. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit allen geteilt. Der spezifische Code für die obere Navigationsleiste des WeChat-Miniprogramms wird als Referenz bereitgestellt. Der spezifische Inhalt lautet wie folgt:

Anforderungen: Obere Navigationsleiste

Rendering:

wxml:

<!--导航条--> 
<view class="navbar"> 
 <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? &#39;active&#39; : &#39;&#39;}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> 
</view> 
 
<!--首页--> 
<view hidden="{{currentTab!==0}}"> 
 tab_01 
</view> 
 
<!--搜索--> 
<view hidden="{{currentTab!==1}}"> 
 tab_02 
</view> 
 
<!--我--> 
<view hidden="{{currentTab!==2}}"> 
 tab_03 
</view>

wxss:

page{ 
 display: flex; 
 flex-direction: column; 
 height: 100%; 
} 
.navbar{ 
 flex: none; 
 display: flex; 
 background: #fff; 
} 
.navbar .item{ 
 position: relative; 
 flex: auto; 
 text-align: center; 
 line-height: 80rpx; 
} 
.navbar .item.active{ 
 color: #FFCC00; 
} 
.navbar .item.active:after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 height: 4rpx; 
 background: #FFCC00; 
}

js:

var app = getApp() 
Page({ 
 data: { 
 navbar: ['首页', '搜索', '我'], 
 currentTab: 0 
 }, 
 navbarTap: function(e){ 
 this.setData({ 
  currentTab: e.currentTarget.dataset.idx 
 }) 
 } 
})

Ausführen:

[Verwandte Empfehlungen]

1. Download des Quellcodes der WeChat-Plattform für öffentliche Konten

2 Betriebsversion des PigCms-Mikro-E-Commerce-Systems (unabhängiges Mikro-Store-Einkaufszentrum + drei-)

3. WeChat People King v3.4.5 Advanced Commercial Edition WeChat Rubik's Cube Quellcode

4 Applet-Entwicklung (TabBar oben im Fenster)Seitenwechsel

Das obige ist der detaillierte Inhalt vonWeChat Development Praktische obere Navigationsleiste (Registerkarte). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!