小程序自定义tabbar【完整源码】

代码

index.wxml

    {{itemName}}

{{itemName}}


    {{itemName}}

  

    {{itemName}} 

  

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    currentTab:0,
    tabArray:["tab1", "tab2", "tab3", "tab4"]
  },
  //事件处理函数
  bindChange: function( e ) { 
    var that = this;  
    that.setData( { currentTab: e.detail.current });  
  },  
  swichNav: function( e ) {  
    var that = this;  
    console.log(e.target)
    if( this.data.currentTab === e.target.dataset.current ) {  
      return false;  
    } else {  
      that.setData( {  
        currentTab: e.target.dataset.current  
      })  
    }  
  },  
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss

/**index.wxss**/
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nav-tabs{
  width: 100%;
  height: 75rpx;
  display: flex;   
}
.tab-content{
  flex: 1;
}
.default{
    line-height:75rpx;
    text-align:center;
    flex:1;
    border-bottom:1px solid #eee;
    color:#000;
    font-weight:bold;
    font-size:28rpx;  
}
.active{
    line-height:75rpx;
    text-align:center;
    color:#fc5558;
    flex:1;
    border-bottom:1px solid red;
    font-weight:bold;
    font-size:28rpx;
}
.show{
    display:block;
    flex: 1;
}
.hidden{
    display:none;
    flex: 1;
}

个人空间：sanghongxv.gitee.io