uni-app 底部导航栏组件需求

在 uni-app 中实现底部导航栏组件的需求，通常可以通过 pages.json 配置和自定义组件的方式来完成。下面是一个详细的实现案例，包括配置和组件代码。

1. pages.json 配置

首先，在 pages.json 中配置底部导航栏的各个页面。假设我们有三个页面：首页、消息页和个人中心页。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/message/message",
      "style": {
        "navigationBarTitleText": "消息"
      }
    },
    {
      "path": "pages/profile/profile",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "static/tabbar/message.png",
        "selectedIconPath": "static/tabbar/message-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人中心",
        "iconPath": "static/tabbar/profile.png",
        "selectedIconPath": "static/tabbar/profile-active.png"
      }
    ]
  }
}

2. 自定义底部导航栏组件（可选）

如果 pages.json 配置的底部导航栏不能满足需求，比如需要动态改变某些属性，可以自定义一个底部导航栏组件。

自定义组件 CustomTabBar.vue

<template>
  <view class="tab-bar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-bar-item"
      @click="navigateTo(item.pagePath)"
    >
      <image :src="item.iconPath" class="tab-bar-icon" />
      <text class="tab-bar-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { text: '首页', pagePath: '/pages/index/index', iconPath: '/static/tabbar/home.png' },
        { text: '消息', pagePath: '/pages/message/message', iconPath: '/static/tabbar/message.png' },
        { text: '个人中心', pagePath: '/pages/profile/profile', iconPath: '/static/tabbar/profile.png' },
      ],
    };
  },
  methods: {
    navigateTo(pagePath) {
      uni.switchTab({ url: pagePath });
    },
  },
};
</script>

<style>
/* 添加你的样式 */
</style>

总结

通过 pages.json 配置，我们可以快速实现一个基本的底部导航栏。如果需要更复杂的逻辑，可以自定义一个底部导航栏组件，通过编程控制其行为。希望这个案例能帮助你实现 uni-app 中的底部导航栏需求。