Top navigation bar example of WeChat applet development

This article mainly introduces the relevant information about the top navigation bar example code of WeChat applet development. Friends who need it can refer to

Top navigation bar of WeChat applet development

Requirements: Top navigation bar

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 
  }) 
 } 
})

Run:

Thank you for reading, I hope it can help you, thank you for your support of this site!

The above is the detailed content of Top navigation bar example of WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!