那么，Hbuilder小程序自定义底部导航栏的代码呢？

Hbuilder小程序自定义底部导航栏的代码如下：

1. 在app.vue中添加以下代码：

<template>
  <div>
    <uni-tab-bar :list="tabList" :current="current" @change="onChange" />
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabList: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "/static/tabBar/home.png",
          selectedIconPath: "/static/tabBar/home-active.png"
        },
        {
          pagePath: "/pages/cart/cart",
          text: "购物车",
          iconPath: "/static/tabBar/cart.png",
          selectedIconPath: "/static/tabBar/cart-active.png"
        },
        {
          pagePath: "/pages/user/user",
          text: "我的",
          iconPath: "/static/tabBar/user.png",
          selectedIconPath: "/static/tabBar/user-active.png"
        }
      ]
    };
  },
  methods: {
    onChange(e) {
      this.current = e.index;
      uni.switchTab({
        url: this.tabList[e.index].pagePath
      });
    }
  },
  mounted() {
    // 获取当前页面路由
    const pages = getCurrentPages();
    const { route } = pages[pages.length - 1];
    // 根据路由设置当前选中的tab
    this.current = this.tabList.findIndex(
      item => item.pagePath === `/${route}`
    );
  }
};
</script>

2. 在pages文件夹中新建三个页面：index、cart、user，并在每个页面中添加以下代码：

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是首页"
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: "首页" });
  }
};
</script>

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是购物车"
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: "购物车" });
  }
};
</script>

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "这是我的"
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({ title: "我的" });
  }
};
</script>

3. 在static文件夹中新建一个名为tabBar的文件夹，并在其中添加四张图片：home.png、home-active.png、cart.png、cart-active.png、user.png、user-active.png，用于作为底部导航栏的图标。

4. 运行小程序即可看到自定义的底部导航栏效果。