微信小程序（六）tabBar的使用

注释很详细，直接上代码

上一篇

新增内容：

1. 标签栏文字的内容以及默认与选中颜色

2. 标签栏图标的默认样式与选中样式

3. 标签选项路径页面

4.标签栏背景颜色

🐼（文末补充）设置标签栏后为什么navigator标签无法跳转页面了

温馨提醒：tabBar只在其对应着的页面生效，其他页面不生效

源码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
    
},
//标签栏有关配置，与页面配置同级
"tabBar": {
	//标签栏文字的默认颜色
    "color": "#333434",
    //被选中的选项的文字的颜色
    "selectedColor": "#ff4735",
    //标签栏背景颜色
    "backgroundColor": "#2fc5c7",
    //标签栏列表（至少得两个，也不能太多，否则不好看）
    "list": [{
    	//页面路径
        "pagePath": "pages/index/index",
        //标签选项的文字
        "text": "主页",
        //标签选项的默认图标
        "iconPath": "/static/tabbar/home-default.png",
        //标签选项选中后的图标
        "selectedIconPath": "/static/tabbar/home-active.png"
    },
    {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/static/tabbar/logs-default.png",
        "selectedIconPath": "/static/tabbar/logs-active.png"
    }
]
},

  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

效果演示：

素材链接

img-blog.csdnimg.cn/direct/1354819bd03847749fffedcff08db6e9.png

img-blog.csdnimg.cn/direct/f68a173b4b944fb1884a76158d3d7f31.png
``

img-blog.csdnimg.cn/direct/4d150e8361564d7381add8e4bcd4356d.png

img-blog.csdnimg.cn/direct/ecbf5d7d6f1b4524b9f093d7037d3713.png

补充内容

为什么navigator无法跳转标签栏指向的页面了

想象一下，如果navigator的组件跳转了 而标签栏却没有改变指向的标签选项是不是不太行

解决方法

在navigator组件中添加属性open-type以实现联动

修改前

<navigator url="../logs/logs">
	<button type="default">相对路径跳转</button>
</navigator>

修改后

<navigator open-type="switchTab" url="../logs/logs">
	<button type="default">相对路径跳转</button>
</navigator>

下一篇