微信小程序开发（十七）小程序tabbar实现底部导航栏

我们在小程序开发过程中都喜欢将小程序分成很多模块来进行开发，而要展示这些模块的时候我们就通过底部导航栏来进行展示，点击不同按钮，展示不同模块；这里就来说一下小程序的底部导航栏是怎么实现的。

这里先贴一下小程序Tabbar官网地址

属性

这里在贴一下属性

属性这里需要注意一下，list属性是我们在创建tabbar的时候，list集合里面元素的属性。

1. text 是元素的标题
2. iconPath 是元素上面的图标
3. selectedIconPath 是元素选中时候的图标
4. badge 是否显示右上角的红点

代码实现步骤

tabbar的使用其实很简单。

首先我们要在app.json文件中配置我们的tabbar元素集合信息，注意是app.json文件。

"tabBar": {
     
    "list": [{
     
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
}

我们在输入tabbar然后回车，会自动帮我们生成以上代码，我们要对其进行修改。

然后修改tabbar代码，配置页面跳转路径以及标题：

"tabBar": {
     
    "color": "#2b333b",
    "selectedColor": "#3bb149",
    "borderStyle": "black",
    "list": [{
     
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
     
      "pagePath": "pages/other/other",
      "text": "其他"
    },{
     
      "pagePath": "pages/personal/personal",
      "text": "我的"
    }]
},

color 默认颜色
selectedColor 选中颜色
list tabbar元素集合

效果图：

我们可以看到底部有了导航栏，并且默认选择了首页，也就是我们元素集合的第一个元素。

点击不同页面进行跳转。

其他：

我的：

到这里就结束了。

这就是小程序底部导航栏的实现，也很简单~