微信小程序

更新：

2019-1-18：自定义tabbar组件已发布

各种奇葩的需求，造就了我们

wxml

<view class="nav-tabs">
  <view class="tab-list  {{currentTab == idx?'active':'default'}}" wx:for="{{tabArray}}" wx:key="prototype" wx:for-index="idx"            wx:for-item="itemName" data-current="{{idx}}" bindtap="swichNav">{{itemName}}
  </view>
</view>
<view class="{{currentTab == idx?'show':'hidden'}} tab-content" wx:for="{{tabArray}}" wx:key="prototype" wx:for-index="idx"               wx:for-item="itemName">{{itemName}}-{{idx+1}}
</view>

wxss

/**index.wxss**/

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-tabs {
  width: 100%;
  height: 75rpx;
  display: flex;
  position: fixed;
  bottom: 0;
}

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

js

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