微信小程序自定义tabbar

实现效果：

官方文档：

自定义 tabBar | 微信开放文档

实现步骤：

1. 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

// 需要先定义tabBar页面
// “pages” 配置里面也不要忘了
"tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#eb7209",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "pages/home/index",
            "iconPath": "static/images/tabbar/home.png",
            "selectedIconPath": "static/images/tabbar/home_cur.png",
            "text": "首页"
        },
        {
            "pagePath": "pages/bill/index",
            "iconPath": "static/images/tabbar/bill.png",
            "selectedIconPath": "static/images/tabbar/bill_cur.png",
            "text": "单据"
        },
        {
            "pagePath": "pages/plan/index",
            "iconPath": "static/images/tabbar/plan.png",
            "selectedIconPath": "static/images/tabbar/plan_cur.png",
            "text": "计划"
        },
        {
            "pagePath": "pages/mine/index",
            "iconPath": "static/images/tabbar/mine.png",
            "selectedIconPath": "static/images/tabbar/mine_cur.png",
            "text": "我的"
        }
    ]
},

2. 在根目录新建custom-tab-bar文件夹（切记，文件夹名称不能更改，不然获取不到），

#index.html

<!--custom-tab-bar/index.wxml-->
<cover-view class="custom-tabbar">
    <cover-view wx:for="{{tabbarList}}" wx:key="index" class="tabbar-item" data-index="{{index}}" bindtap="swicthTabbar">
        <cover-image src="{{currentName == item.name ? item.selectedIconPath : item.iconPath}}" class="tabbar-icon" style="{{ item.style }}"></cover-image>
        <cover-view class="{{currentName ==  item.name ? 'text-active' : 'tabbar-text'}}">{{ item.text }}</cover-view>
    </cover-view>
</cover-view>

#index.wxss

/* custom-tab-bar/index.wxss */
.custom-tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 112rpx;
    background-color: #fff;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.24);
    /*（兼容有安全区域的手机）*/
    padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/
    display: flex;
}
.tabbar-item{
    flex: 1;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
}
.tabbar-icon{
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
}
.tabbar-text{
    color: #999999;
}
.text-active{
    color: #EB7209;
}

#index.js

// custom-tab-bar/index.js
Component({
    data:{
        currentName: 'home',
        //准备好自定义tabbar资源
        //自定义的tabBar 需要在app.json配置中存在
        tabbarList: [
            {
                "pagePath": "/pages/home/index",
                "iconPath": "/static/images/tabbar/home.png",
                "selectedIconPath": "/static/images/tabbar/home_cur.png",
                "text": "首页",
                "name": "home"
            },
            {
                "pagePath": "/pages/bill/index",
                "iconPath": "/static/images/tabbar/bill.png",
                "selectedIconPath": "/static/images/tabbar/bill_cur.png",
                "text": "单据",
                "name": "bill"
            },
            {
                "pagePath": "/pages/plan/index",
                "iconPath": "/static/images/tabbar/plan.png",
                "selectedIconPath": "/static/images/tabbar/plan_cur.png",
                "text": "计划",
                "name": "plan"
            },
            {
                "pagePath": "/pages/mine/index",
                "iconPath": "/static/images/tabbar/mine.png",
                "selectedIconPath": "/static/images/tabbar/mine_cur.png",
                "text": "我的",
                "name": "mine"
            }
        ]
    },
    lifetimes:{
      //组件生命周期
      attached(){
        //在组件实列进入页面节点树时执行
        console.log('嘿，我被执行了');
      }
    },
    methods:{
      //组件定义的方法（浓浓的既视感）
      swicthTabbar(e){
        let { index} = e.currentTarget.dataset;
        wx.switchTab({
          url: this.data.tabbarList[index].pagePath,
        })
      }
    }
})

 3.在app.js中定义全局setTabbar方法

App({
  //定义全局setTabbar方法
  $setTabbar(that, currentName){
    let tabbar = that.getTabBar();
    console.log(tabbar);
    tabbar.setData({
      currentName
    })
  },
  onLaunch() {
  },
})

4.在用到tabbar的页面添加更改当前选中页面方法（例如：home.js,bill.js,plan.js,mine.js）

onShow() {
    //'home' 根据页面来 在下面的tabbarList的name属性需要用到
    getApp().$setTabbar(this, 'home');
},

5.另外需要用到tabbar的页面需要考虑tabbar的高度（我是这样做处理的，自定义一个占位符）

<view class="plan">
    <!-- 内容 -->
    <view class="content"></view>
    <!-- 占位符 -->
    <view class="plan-block"></view>
</view>

.plan {
    height: 100%;
    padding: 0 40rpx;
    display: flex;
    flex-direction: column;
}
.plan .plan-block {
    box-sizing: content-box;
    height: 112rpx;
    /*（兼容有安全区域的手机）*/
    padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/
}
.content {
    overflow: hidden;
    flex: 1;
}

至此，微信小程序的自定义tabbar就完成了