微信小程序开发过程中，难免需要在不同的页面中显示不同的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有所区别，其他的基本类似，属于正常的页面开发和逻辑实现，主要是在调用子组件和子组件上拉加载时调用方法的问题。

如有问题，请各位及时指正，感谢！