更新：
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
})
})
}
})