微信小程序自定義底部導航欄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;
}