目前开发微信小程序，需求是要在非首页实现tabbar的切换效果，但是，官方文档的tabbar只能在首页使用，而且还有个坑，tabbar的第一个页面必须是app.json文件pages数组的第一个，不然显示不出来。
接下来说一下如何在非首页实现tabbar效果，这个效果在Android里面非常的简单，使用
fragment进行切换就可以实现，那么也是把这种思维带到了小程序中，使用component进行切换，先上代码。
page.js
Page({
data: {
currentTab: 0,
items: [{
"iconPath": "/icon/overview.png",
"selectedIconPath": "/icon/overview_sel.png",
"text": "首页"
},
{
"iconPath": "/icon/overview.png",
"selectedIconPath": "/icon/overview_sel.png",
"text": "推荐"
},
{
"iconPath": "/icon/overview.png",
"selectedIconPath": "/icon/overview_sel.png",
"text": "我的"
}
]
},
/**
* 选项卡点击事件
*/
tabbarClick: function(e) {
let that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
})
page.json
{
"usingComponents": {
"my-component": "/components/component-tag-name",
"aa":"/aa/aa",
"bb":"/bb/bb"
}
}
page.wxml
<view class='root'>
<view class='box-h'>
<view wx:if="{{currentTab == 0}}">
<my-component class='component' />
</view>
<view wx:if="{{currentTab == 1}}">
<aa class='component' />
</view>
<view wx:if="{{currentTab == 2}}">
<bb class='component' />
</view>
</view>
<view class="box-tabbar">
<view class="tab-tiem {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="tabbarClick">
<text class="tab-text" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}">{{item.text}}</text>
<image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
</view>
</view>
</view>
page.wxss
.iconPath {
width:54rpx;
height: 54rpx;
}
.tab-tiem{
width: 100%;
padding-top: 7rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
background: #e4e4e4;
}
.component{
height: 100%;
}
.root{
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
overflow:hidden
}
.box-tabbar {
height: 10%;
width: 100%;
display: flex;
position: fixed;
bottom: 0;
justify-content: space-between;
}
框架结构图
image.png
注意事项：
1.page.wxml使用的是wx:if来控制Component的显示隐藏，如果使用hidden的话，Component中如果还是用了自定义component的话，自定义component会获取不到正确的宽高，出现控件无法正常显示。
2.如果再页面中使用到自定义Component，用wx:if来控制显示隐藏的时候，pageLifetimes中的show()函数不会被调用，所以逻辑代码尽量在lifetimes ready()中执行。
