小程序使用扩展组件tabbar实现底部栏tabBar效果

app.json

//引入weui库
 "useExtendedLib": {
    "kbone": true,
    "weui": true
  }

index.wxml

<view class="{{tabbarIndex == 0 ? 'show':'hidden'}}">tab1内容</view>
<view class="{{tabbarIndex == 1 ? 'show':'hidden'}}">tab2内容</view>
<mp-tabbar ext-class="foot-tabbar" style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" data-tabbarIndex="index" bindchange="tabChange"></mp-tabbar>

index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabbarIndex: 0, //默认显示  tab1
    list: [{
        "text": "tab1",
        "iconPath": "/images/coordinate.png",
        "selectedIconPath": "/images/coordinate.png",
        dot: true
      },
      {
        "text": "tab2",
        "iconPath": "/images/coordinate.png",
        "selectedIconPath": "/images/coordinate.png",
        badge: 'New'
      }
    ]
  },
  tabChange(e) {
    //获取到底部栏元素的下标
    let index = e.detail.index;
    this.setData({
      tabbarIndex: index
    })
    console.log('tab change', e.detail.index)
  }
})

index.json

{
  "navigationBarTitleText": "账单",
  "usingComponents": {
    "mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"
  }
}

index.wxss

//底部栏背景色
.foot-tabbar {
  background: #ffffff !important;
}
//底部栏文字未选中时的颜色
.tabbar--weui-tabbar__label {
  color: #555555 !important;
}
//底部栏文字选中时的颜色
.tabbar--weui-tabbar__item.tabbar--weui-bar__item_on .tabbar--weui-tabbar__label {
  color: #2ea7e0 !important;
}

.show {
  display: block;
}

.hidden {
  display: none;
}

最终切换效果如图所示：