HBuilder X实现tabBar底部导航记录

HBuilder X实现tabBar底部导航记录

首先，打开uniapp官网，找到tarbar官方文档，仔细阅读，具体位置如下，全局配置下面的pages.json页面路由里面找到tabBar，点击查看：

 重点注意这两句话：

找到文档我们就可以按照上面的提示去写代码了！

首先我们需要使用HBuilder X创建一个项目，接着找到对应位置开始写代码

📌第一步：在pages文件夹下创建一个tabbar文件夹，里面专门存放对应的tabbar导航页面，接着根据个人需要创建tab，数量最少2个，最多5个，如图所示，这里我创建了4个，每一个文件夹下面都创建了一个.vue文件来写页面代码

📌第二步：找到pages.json文件，在和"pages"同级的位置写tabbar的配置代码，官方文档里面有示例代码参考以及属性说明

 创建了4个tab，所以我这边需要配置4个，代码如下：

	"tabBar": {// 文字未选中颜色"color": "#999",// 选中颜色"selectedColor": "#00b783",// 边框颜色"borderStyle": "#fff",// 背景颜色"backgroundColor": "#fff",// 配置tab页面"list": [{// 对应页面地址"pagePath": "pages/tabbar/index/index",// 显示文字"text": "首页",// 图标选中和未选中"iconPath": "static/index1.png","selectedIconPath": "static/index2.png"}, {// 对应页面地址"pagePath": "pages/tabbar/classfiy/classfiy",// 显示文字"text": "分类","iconPath": "static/class1.png","selectedIconPath": "static/class2.png"}, {// 对应页面地址"pagePath": "pages/tabbar/study/study",// 显示文字"text": "学习","iconPath": "static/study1.png","selectedIconPath": "static/study2.png"}, {// 对应页面地址"pagePath": "pages/tabbar/mine/mine",// 显示文字"text": "我的","iconPath": "static/my1.png","selectedIconPath": "static/my2.png"}]}

 这里又有些朋友可能不知道去哪里找图标图片，这里可以去iconfont 阿里巴巴矢量图标库里面找自己需要的图标，下载下来使用，官网地址：/

图标下载具体步骤就是：

1. 搜索图标
2. 根据自己需要调整颜色
3. 下载png格式到本地，然后直接使用就可以了

📌第三步：还是在pages.json文件里面进行，我们需要把pages配置项数组里面的第一个对象设置成我们tabbar对应的第一个页面，如果这里不配置是不会显示tabbar导航条的，千万不要忘记了！

 第四步就是给每一个tabbar页面配置到"pages"里面，代码如下：

	"pages": [ //pages数组中第一项表示应用启动页，参考：{"path": "pages/tabbar/index/index","style": {// 首页不需要可不配置// "navigationBarTitleText": "首页","enablePullDownRefresh": false,"navigationStyle": "custom"}}, {"path": "pages/tabbar/classfiy/classfiy","style": {// 顶部导航栏标题文字内容"navigationBarTitleText": "分类",// 顶部导航栏背景颜色"navigationBarBackgroundColor": "#8ef400",// 顶部导航栏标题文字颜色"navigationBarTextStyle": "white",// 是否开启下拉刷新"enablePullDownRefresh": false}}, {"path": "pages/tabbar/study/study","style": {"navigationBarTitleText": "学习","navigationBarBackgroundColor": "#8ef400","navigationBarTextStyle": "white","enablePullDownRefresh": false}}, {"path": "pages/tabbar/mine/mine","style": {"navigationBarTitleText": "我的","navigationBarBackgroundColor": "#8ef400","navigationBarTextStyle": "white","enablePullDownRefresh": false}}],

 最终做出了的导航条效果就像这样子下面这个样子：

 顶部导航栏标题就像下面这个样子啦

 到这里就结束啦，浅浅记录一下！