小程序-动态更改TabBar(底部导航栏)-实现一个程序两个独立的导航栏

原创已于 2022-06-30 17:51:13 修改 · 3.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端 #javascript

于 2022-06-30 17:44:54 首次发布

小程序专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在小程序中实现自定义导航栏，包括在utils文件夹中创建tabbar.js来存储不同页面的导航栏配置，然后在需要的页面引入对应的导航栏列表，并在页面的onShow生命周期函数中设置导航栏的显示。示例展示了首页和商城页的导航栏设置方法。

一：先自定义导航栏

小程序-自定义导航栏

二：在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"
  }
]

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

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

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

四：页面使用

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

例1：首页

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

在这里插入图片描述

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

例2：商城

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

在这里插入图片描述