微信小程序 - 自定义tabbar

更新：

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

 .tab-content {
   flex:;
 }

 .default {
   line-height: 75rpx;
   text-align: center;
   flex:;
   border-bottom: 1px solid #eee;
   color: #000;
   font-weight: bold;
   font-size: 28rpx;
 }

 .active {
   line-height: 75rpx;
   text-align: center;
   color: #fc5558;
   flex:;
   border-bottom: 1px solid red;
   font-weight: bold;
   font-size: 28rpx;
 }

 .show {
   display: block;
   flex:;
 }

 .hidden {
   display: none;
   flex:;
 }

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