用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序之顶部导航栏

天下雪 2017-2-23 00:11

作者:michael_ouyang,来自授权地址需求:顶部导航栏效果图:wxml:!--导航条-- view class="navbar" text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key ...

作者:michael_ouyang,来自授权地址 
需求:顶部导航栏 
效果图: 

wxml:

  1. <!--导航条-->
  2. <view class="navbar">
  3. <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
  4. </view>
  5. <!--首页-->
  6. <view hidden="{{currentTab!==0}}">
  7. tab_01
  8. </view>
  9. <!--搜索-->
  10. <view hidden="{{currentTab!==1}}">
  11. tab_02
  12. </view>
  13. <!--我-->
  14. <view hidden="{{currentTab!==2}}">
  15. tab_03
  16. </view>

wxss:

  1. page{
  2. display: flex;
  3. flex-direction: column;
  4. height: 100%;
  5. }
  6. .navbar{
  7. flex: none;
  8. display: flex;
  9. background: #fff;
  10. }
  11. .navbar .item{
  12. position: relative;
  13. flex: auto;
  14. text-align: center;
  15. line-height: 80rpx;
  16. }
  17. .navbar .item.active{
  18. color: #FFCC00;
  19. }
  20. .navbar .item.active:after{
  21. content: "";
  22. display: block;
  23. position: absolute;
  24. bottom: 0;
  25. left: 0;
  26. right: 0;
  27. height: 4rpx;
  28. background: #FFCC00;
  29. }

js:

  1. var app = getApp()
  2. Page({
  3. data: {
  4. navbar: ['首页', '搜索', '我'],
  5. currentTab: 0
  6. },
  7. navbarTap: function(e){
  8. this.setData({
  9. currentTab: e.currentTarget.dataset.idx
  10. })
  11. }
  12. })

运行: 

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: michael_ouyang 来自: 授权地址

相关阅读

推荐阅读

    最新Demo