小程序底部导航栏的使用

微信小程序其实自带了底部导航栏功能，使用起来也还方便，但是有一些限制，例如底部导航输入不能超过五个，不能动态修改导航栏图标或者内容，简单使用还是问题不大，但是遇到多账号登录问题时就麻烦了，所有还是得自定义。不过，前面也先介绍一下我之前使用过的一些方法吧，下一节讲讲我使用的自定义底部导航栏。

官方底部导航栏

在全局配置 app.json 中添加代码，如下：

{
  ......
  "tabBar": {
    "borderStyle": "black",  //tabbar上边框的颜色， 仅支持 black/white
    "position": "bottom",  //可选值 bottom、top
    "backgroundColor": "#FFFFFF",  //tab 的背景色
    "color": "gray",  //tab 上的文字默认颜色
    "selectedColor": "#DF5054",  //tab 上的文字选中时的颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"",
        "selectedIconPath":"",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath":"",
        "selectedIconPath":"",
        "text": "日志"
      }
    ]
  },
 ......

这里需要指定一个 list 来表示底部导航，几个属性还是很好理解的，更多属性可以参考官方文档。

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

就是这里有个坑，第一个页面一定要是 pages 的第一个页面，不然会出问题

"pages": [
		"pages/index/index"
]

官方自定义底部导航方案

先看官方文档，后面简单说几句

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

• 配置信息

配置中的 custom 字段一定要选未 true，list也要写上

{
  ......
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath":"",
        "text": "日志"
      }
    ]
  },
 ......

• 添加 tabBar 代码文件

这里一定要注意是根目录，文件夹命名为 custom-tab-bar，文件命名为 index.js之类的就行，我弄的时候好久才反应过来。

代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

• 编写 tabBar 代码

这里我没编写 tabBar 代码，直接用的有赞的底部导航栏组件，而且使用文档也写的清楚

https://vant-contrib.gitee.io/vant-weapp/#/tabbar

下面是 index 里面要写的内容

// custom-tab-bar/index.json
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index"
  }
}

<!-- custom-tab-bar/index.html -->
  <van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item  icon="home">首页</van-tabbar-item>
    <van-tabbar-item  icon="log">日志</van-tabbar-item>
  </van-tabbar>

// custom-tab-bar/index.js
Component({
    
  data: {
    active: null,
    "list": [
      {
        "pagePath": "/pages/index/index"
      },
      {
        "pagePath": "/pages/log/log"
      }
    ]
  },
    
  methods: {
      
    onChange:function(event){
      const index = event.detail;
      wx.switchTab({
        url: this.data.list[index].pagePath
      })
    }
  }
})

在具体的 tabBar 页面中

  onLoad: function (options) {
    this.getTabBar().setData({
      active : 0 
    })
  },

这里同样要记得将第一个页面放到 pages 的第一个页面，不然会出问题。

简单的多用户登录

无论官方还是根据官方自定义的底部导航栏都有一个限制，底部 tabBar 最多只能显示5个，自定组件中的 tabBar 必须跟 app.json 中的一样。

但是如果我们多用户使用到的 tabBar 总共不超过5个，比如有两种角色，管理员登录用三个标签，普通用户用另外两个标签，加起来不超过五个，可以用下面的方法实现多账号登录。

• 先自定义底部导航栏

这个不详细说了，和上面一样，最多在 app.json 中设置五个页面。

• 全局变量存储导航信息

在 app.js 中创建一个全局的 list 存放底部导航，创建不同用户需要用到的底部导航信息数组。

globalData: {
    list: [], // tabBar
    // 下面内容可以放globalData里，也可以创建个文件专门管理
    // 用户
    user = [{
            "pagePath": "/pages/index/index",
            "text": "首页",
            "iconPath": "/images/home.png",
            "selectedIconPath": "/images/home-color.png"
        },
        {
            "pagePath": "/pages/user/user",
            "text": "个人中心",
            "iconPath": "/images/user.png",
            "selectedIconPath": "/images/user-color.png"
        }
    ]

    // 管理员
    manager = [{
            "pagePath": "/pages/manager/manager",
            "text": "管理",
            "iconPath": "/images/manager.png",
            "selectedIconPath": "/images/manager-color.png"
        },
        {
            "pagePath": "/pages/log/log",
            "text": "日志",
            "iconPath": "/images/log.png",
            "selectedIconPath": "/images/log-color.png"
        }
    ]
}

• 自定义 tabBar 组件内容

data: {
    selected: 0,
    list:[]
  },
      
lifetimes: {
    attached () {
        this.setData({
        	list: app.globalData.list
      	})
    },
},

• 登录成功后对全局变量赋值

// 登录成功
loginSuccess () {
    app.globalData.list =  app.globalData.user
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

• 具体页面设置 tabBar 页面选中效果

  onShow () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      // 刷新页面显示
      this.getTabBar().setData({
        selected: 0,
        list: app.globalData.list
      })
    }
  },

• 结语

这里的基础库版本不能太低，内容大致都有了，有问题也还得自己琢磨琢磨。