微信小程序实战之顶部导航栏（选项卡）（微信小程序实战之顶部导航栏（选项卡）（1））
本文实例为大家分享了微信小程序顶部导航栏的具体代码，供大家参考，具体内容如下
需求：需求：顶部导航栏
效果图：
wxml：
<!--导航条-->
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" 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;
评论0