小程序成長之路_给页面添加tabBar 和添加tabBar时的注意事项（三）

程序员文章站 2022-06-01 22:17:35

...

上篇博客我们已经成功创建页面，并且显示我们自己所创建页面的内容，那么我们都知道每个项目下面都会有tabBar,当然大部分都有，也不排除没有的情况啊，那么这篇我主要是来添加一个tabBar并,且总结一下写的过程中一个小程序小白开发者遇到让人头疼的问题，并讲解解决方法，也许对有小程序开发经验的盆友来说这是一个简单的问题，但是妹纸，太菜了塞，哈哈

一般来说，tabBar 上的图标都是引用ui给切好的图片，当我们是小白时，第一时间是要看关于tabBar的官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE(官方文档往下可以看到有介绍tabBar的)

或者是百度 tabBar是怎么来实现的，看文档时如果我们特别细心时你会发现一个问题

小程序成長之路_给页面添加tabBar 和添加tabBar时的注意事项（三）

这样的话你就会告诉UI,给你切图片时按照上面所示的大小来切，当然大部分我们都没怎么在意，有的项目图片都是ui提前切好的就直接拿来用了，那么我们现在先用一个ui原来切好的图片来实现一个 tabBar

1.添加tabBar

① 创建一个文件夹来放图片

当然我只是按照我的习惯来创建文件，我会不同模块儿的图片都分开放在不同的文件夹内，如下图：当然不要被我改变你们自己的习惯啊

小程序成長之路_给页面添加tabBar 和添加tabBar时的注意事项（三）

② 创建每个tab所对应的page页面；创建page页面上一篇讲过了，不会的同学看上一篇啊，创建完如下图：

小程序成長之路_给页面添加tabBar 和添加tabBar时的注意事项（三）

③ tabBar 在App.json中的配置：代码如下：

 "tabBar": {
    "color": "#282828",
    "selectedColor": "#E31436",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/test/test",
        "text": "页面一",
        "iconPath": "images/tab/tab-one-nor.png",
        "selectedIconPath": "images/tab/tab-one-sel.png"
      },
      {
        "pagePath": "pages/two-page/two-page",
        "text": "页面二",
        "iconPath": "images/tab/tab-two-nor.png",
        "selectedIconPath": "images/tab/tab-two-sel.png"
      },
      {
        "pagePath": "pages/three-page/three-page",
        "text": "页面三",
          "iconPath": "images/tab/tab-three-nor.png",
          "selectedIconPath": "images/tab/tab-three-sel.png"
      },
      {
        "pagePath": "pages/four-page/four-page",
        "text": "页面四",
        "iconPath": "images/tab/tab-four-nor.png",
        "selectedIconPath": "images/tab/tab-four-sel.png"
      }
    ]
  }

页面效果如下：

小程序成長之路_给页面添加tabBar 和添加tabBar时的注意事项（三）