微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）

demo下载：https://github.com/BlueChuan/wx-my-tabBar-navigator

一.app.json配置

　　点击查看官方文档示例https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

　　这里配置

{
    "pages": [
        "pages/usersLists/usersLists",
        "pages/addMember/addMember",
        "pages/mine/mine"
    ],
    "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#F1F1F1",
        "navigationBarTitleText": "test",
        "navigationBarTextStyle": "black"
    },
    "tabBar": {
        "custom": true,
        "color": "#535353",
        "selectedColor": "#000000",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/usersLists/usersLists",
                "text": "用户"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "个人"
            }
        ]
    },
    "usingComponents": {
        "header": "components/header/header",
        "add-icon": "components/add-icon/add-icon"
    },
    "sitemapLocation": "sitemap.json"
}

 

二.自定义tabBar

　　1.在根目录新建custom-tab-bar目录，创建index组件。（点击查看官方文档示例https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）

　　　**官方示例标签是cover-view来确保tabbar的层级，但是我这里要用到iconfont，遗憾的是cover-view不支持iconfont，所以我这里用的普通的view。如果iconfont不是必须的，换成cover-view更好。

<!--custom-tab-bar/index.wxml-->
<view class='tab-bar'>
    <text class='iconfont {{item.iconPath}} tab-icon'  style='color: {{index===selected?selectedColor:color}}'  wx:for='{{list}}' wx:key='index' bindtap='changeTab' data-index='{{index}}' data-url='{{item.pagePath}}' data-style='{{item.navigateStyle}}'></text>
</view>

// custom-tab-bar/custom-tab-bar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        selected: 0,
        color: "#535353",
        selectedColor: "rgb(131,175,155)",
        list: [{
            pagePath: "/pages/usersLists/usersLists",
            iconPath: "iconyonghu"
        }, {
            pagePath: "/pages/mine/mine",
            iconPath: "icongerenzhongxinxuanzhong"
        }]
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeTab(e) {
            let { index, url} = e.currentTarget.dataset;
            let { selected } = this.data;
            if (selected === index) return;
            wx.switchTab({
                url
            })
            this.setData({ selected: index })
        }
    }
})

/* custom-tab-bar/custom-tab-bar.wxss */
@import "../style/iconfont.wxss";
.tab-bar{
    height: 150rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tab-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    height: 100%;
    font-size: 70rpx;
    color: #535353;
}
.active{
    color: rgb(131,175,155);
}

　　2.在tabbar页面onShow部分加入如下代码

　　

// miniprogram/pages/usersLists/usersLists.js
 onShow: function () {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 0  //数字是当前页面在tabbar的索引
            })
        }
    }

 

// miniprogram/pages/mine/mine.js

 onShow: function () {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 1  //数字是当前页面在tabbar的索引
            })
        }
    }

　可以看到我这里有两个tabbar页面：usersLists和mine。有时候我们会遇到这样一个设计：点击tabbar中的按钮打开一个page（发生页面跳转），按照官方的例子是做不到的。在custom-tab-bar/index中是无法wx.navigateTo跳转的，只能switchTab，比如我在tabbar中间要加一个icon，用来跳转到addMember页面，此时不能加到custom-tab-bar/index中，因此，我们得写一个组件，放在每个tabbar页面中，然后通过样式调整，覆盖在tabbar上。

　　3.新建覆盖在tabbar上的icon组件：add-icon

　　

<!--components/add-icon/add-icon.wxml-->
<text class='iconfont iconjia add-icon' bindtap='goAddPage'></text>

/* components/add-icon/add-icon.wxss */
@import "../../style/iconfont.wxss";
.add-icon{
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:70rpx;
    color:#535353;
}
.active{
    color: rgb(131,175,155);
}

// components/add-icon/add-icon.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        goAddPage(){
            wx.hideTabBar();
            wx.navigateTo({
                url: '/pages/addMember/addMember',
            })
        }
    }
})

附app.wxss

/**app.wxss**/
@import "style/iconfont.wxss";
.false-tab-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    width: 33.33%;
    height: 150rpx;
}
page{
    height: 100%;
}
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
} 

button {
    background: initial;
}

button:focus{
    outline: 0;
}

button::after{
    border: none;
}
.artic{
    width: 100%;
    flex: 1;
    background-color: #f4f4f4;
}
.my-head{
    width: 100%;
}
.page-title{
    width: 100%;
    margin-top: 18rpx;
    text-align: center;
    font-weight: 500;
    font-size: 32rpx;
}