当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实战之顶部导航栏（选项卡）（1）

微信小程序实战之顶部导航栏（选项卡）（1）

2018年05月21日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了微信小程序顶部导航栏的具体代码，供大家参考，具体内容如下

需求：顶部导航栏

效果图：

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

运行：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网