完全按照小程序扩展能力的tabbar样例编写了，但是样例不能切换tabbar？请问切换tabbar是怎么实现的？

Page({
    data: {
        list: [{
            "text": "对话",
            "iconPath": "/page/weui/images/tabbar_icon_chat_default.png",
          "selectedIconPath": "/page/weui/images/tabbar_icon_chat_active.png",
            dot: true
        },
        {
            "text": "设置",
          "iconPath": "/page/weui/images/tabbar_icon_setting_default.png",
          "selectedIconPath": "/page/weui/images/tabbar_icon_setting_active.png",
            badge: 'New'
        }]
    },
    tabChange(e) {
        console.log('tab change', e)
    }
});

<view class="page">
    <view class="page__hd">
        <view class="page__title">Tabbar</view>
        <view class="page__desc">类似小程序原生tabbar的组件，可用于自定义tabbar</view>
    </view>
    <mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>
</view>