小程序-动态更改TabBar(底部导航栏)-实现一个程序两个独立的导航栏_一个小程序可以配置两套tabbar吗

一：先自定义导航栏

小程序-自定义导航栏

二：在utils文件夹中添加 tabbar.js

这个用于储存 导航栏列表

/* 首页的底部导航栏列表 */
export const homePage = [
  {
    "pagePath":"../home/home",
    "text": "首页",
    "iconPath": "../images/ic_home.png",
    "selectedIconPath": "../images/ic_home_active.png"
  },
  {
    "pagePath": "../user/user",
    "text": "个人中心",
    "iconPath": "../images/ic_user.png",
    "selectedIconPath": "../images/ic_user_active.png"
  }
]
/* 商城的底部导航栏列表 */
export const shoppingPage = [
  {
    "pagePath":"../store/store",
    "text": "商城",
    "iconPath": "../images/4180-L.png",
    "selectedIconPath": "../images/4000-L.png"
  },
  {
    "pagePath": "../shopping/shopping",
    "text": "购物车",
    "iconPath": "../images/AA10-L.png",
    "selectedIconPath": "../images/6020-L.png"
  },
  {
    "pagePath": "../mine/mine",
    "text": "我的",
    "iconPath": "../images/5260-L.png",
    "selectedIconPath": "../images/9140-L.png"
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

三：在需要的页面进行引入

页面为首页的 js文件，两个引入只需要一个就可以了，需要那个列表就引入那个列表

import {homePage} from '../../utils/tabbar.js';
import {shoppingPage} from '../../utils/tabbar.js';
1
2

四：页面使用

注：每个用到的页面都要写这段代码，同一个列表的页面只需要修改一下下标。

例1：首页

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().setData({
      selected: 0, // 首页 显示下标
      list: homePage // homePage 为引入的列表
    })
 }  
1
2
3
4
5
6
7
8
9

注：每个用到的页面都要写这段代码，同一个列表的页面只需要修改一下下标。

例2：商城

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().setData({
      selected: 0, // 首页 显示下标
      list: shoppingPage// shoppingPage为引入的列表
    })
 }  
1
2
3
4
5
6
7
8
9