小程序模板网

微信小程序之顶部导航栏

需求:顶部导航栏效果图:wxml:!--导航条-- view class="navbar" text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key ...

 
 
 

需求:顶部导航栏 
效果图: 

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. <!--首页-->
  7. <view hidden="{{currentTab!==0}}">
  8. tab_01
  9. </view>
  10.  
  11. <!--搜索-->
  12. <view hidden="{{currentTab!==1}}">
  13. tab_02
  14. </view>
  15.  
  16. <!--我-->
  17. <view hidden="{{currentTab!==2}}">
  18. tab_03
  19. </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. })

运行: 



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18009.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询