微信小程序 tabBar 功能实现

要实现tabbar的导航条其实很简单，我们要实现全局的tabbar只需要在app.json文件中定义即可，局部的就在局部的tabbar文件中实现。

来看看app.json代码：

export default {
    pages: [
        'pages/index/index',
        "pages/search/search",
        'pages/news/news',
        'pages/attention/attention',
        'pages/collect/collect',
        'pages/comment/comment',
        'pages/my/my',
        "pages/detail/detail",
        "pages/chat/chat",
    ],
    window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#fff',
        navigationBarTitleText: '小红书',
        navigationBarTextStyle: 'black',
        enablePullDownRefresh: true
    },
    tabBar: {
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "assets/tabbar/1.png",
                "selectedIconPath": "assets/tabbar/2.png"
            },
            {
                "pagePath": "pages/news/news",
                "text": "消息",
                "iconPath": "assets/tabbar/news1.png",
                "selectedIconPath": "assets/tabbar/news2.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "assets/tabbar/3.png",
                "selectedIconPath": "assets/tabbar/4.png"
            }
        ]
    },
    permission: {
        "scope.userLocation": {
            "desc": "为了更好的为你服务，请允许访问你的地址"
        }
    }
}