微信小程序开发之顶部导航栏实例

这篇文章主要介绍了微信小程序 开发之顶部导航栏实例代码的相关资料,需要的朋友可以参考下

微信小程序 开发之顶部导航栏

需求：顶部导航栏

效果图：

wxml：

 !--导航条-- 
 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: [ #39;首页 #39;, #39;搜索 #39;, #39;我 #39;], 
 currentTab: 0 
 navbarTap: function(e){ 
 this.setData({ 
 currentTab: e.currentTarget.dataset.idx 
})
运行：


感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
以上就是微信小程序开发之顶部导航栏实例的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！