小程序中顶部导航栏示例代码

<!--导航条-->   <view class="navbar">    <text wx:for="pw_navbar" data-idx="pw_index" class="item pw_currentTab==index ? 'active' : ''" wx:key="unique" bindtap="navbarTap">pw_item</text>   </view>      <!--首页-->   <view hidden="pw_currentTab!==0">    tab_01   </view>      <!--搜索-->   <view hidden="pw_currentTab!==1">    tab_02   </view>      <!--我-->   <view hidden="pw_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     })    }   })

以上就是小程序中顶部导航栏示例代码的详细内容，更多内容请关注技术你好其它相关文章！