微信小程序开发过程中，难免需要在不同的页面中显示不同的tabbar，也就底部的切换栏。而在小程序开发中，原生的tabbar只能定义一次，而且，官方的tabbar切换，定义的list不能超过五项，如果在其他页面中想显示不同的tabbar或者想使用多个按钮切换，此时就需要我们自定义组件来实现tabbar。
一、定义父组件
此处所说的父组件是一个正常开发的page页，作为一个容器来承载我们所需要切换的子组件以及tabbar，具体wxml代码如下：
index.wxml
index.wxml中主要用于放置切换的不同组件和底部的切换栏，这里使用的wx:if来实现显隐，略微一些问题，会产生一些延时或者小抖动的情况。
<view style='margin-bottom:130rpx;'>
<!-- 组件显示，根据自己需求添加 -->
<view wx:if="{{ currentTab == 0 }}">
<component_index id="component_index"/>
</view>
<view wx:if="{{ currentTab == 1 }}">
<component_list id="component_list"/>
</view>
<view wx:if="{{ currentTab == 2 }}">
<component_mine id="component_mine"/>
</view>
</view>
<!-- 自定义 tabbar -->
<view class="nav-tabs">
<view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" bindtap="swichNav">
<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>
具体的样式这里就不展示了，可以去github上面找demo，地址在上面
index.json
在index.json中需要定义并引入所需要使用的组件路径
{
"usingComponents": {
"component_index": "/pages/component/index/index",
"component_mine": "/pages/component/mine/mine",
"component_list": "/pages/component/list/list"
}
}
index.js
index.js主要定义底部tabbar的图片和文字，以及一些在当前页面中使用的函数等。
let app = getApp()
Page({
data: {
currentTab: 0,
//这里只做tab名和显示图标
items: [{
"text": "主页",
"iconPath": "/assets/icons/index.png",
"selectedIconPath": "/assets/icons/index_active.png"
},
{
"text": "列表",
"iconPath": "/assets/icons/list.png",
"selectedIconPath": "/assets/icons/list_active.png"
},
{
"text": "我的",
"iconPath": "/assets/icons/mine.png",
"selectedIconPath": "/assets/icons/mine_active.png"
}
]
},
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(option) {
}
})
注：如果子组件中涉及上拉加载的情况，可在父组件中onReachBottom中调用自组件的方法，代码如下：
this.selectComponent("子组件id名").子组件内方法;
该方法同样适用于获取、修改自组件的变量值。
二、子组件定义
子组件需要定义在pages下面的component中，子组件中properties可用于接受父组件传的值，data用于定义当前组件的初始数据，methods用于定义当前组件内的方法。
子组件也同样拥有生命周期，但与page有所差距，需要注意在使用过程中的一些问题：
1、created 组件实例化，但节点树还未导入，因此这时不能用setData；
2、attached 节点树完成，可以用setData渲染节点，但无法操作节点；
3、ready 组件布局完成，这时可以获取节点信息，也可以操作节点；
4、moved 组件实例被移动到树的另一个位置；
5、detached 组件实例从节点树中移除。
注：除了生命周期与正常的page有所区别，其他的基本类似，属于正常的页面开发和逻辑实现，主要是在调用子组件和子组件上拉加载时调用方法的问题。
如有问题，请各位及时指正，感谢！
