uniapp怎么自定义tabbar

在开发移动应用时，底部导航栏（TabBar）是一个非常常见的组件，用于在不同页面之间进行快速切换。uniapp 提供了默认的 TabBar 配置，但有时我们需要根据项目需求自定义 TabBar 的样式和功能。本文将详细介绍如何在 uniapp 中自定义 TabBar。

1. 使用 uniapp 默认的 TabBar

在 uniapp 中，我们可以通过在 pages.json 文件中配置 tabBar 来快速创建一个底部导航栏。以下是一个简单的配置示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "用户中心"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "用户",
        "iconPath": "static/tabbar/user.png",
        "selectedIconPath": "static/tabbar/user-active.png"
      }
    ],
    "color": "#999999",
    "selectedColor": "#007AFF",
    "backgroundColor": "#ffffff"
  }
}

在这个配置中，我们定义了两个页面（首页和用户中心），并为每个页面配置了对应的 TabBar 项。iconPath 和 selectedIconPath 分别表示未选中和选中状态下的图标路径。

2. 自定义 TabBar

虽然 uniapp 提供了默认的 TabBar 配置，但在某些情况下，我们可能需要更复杂的样式或功能，这时就需要自定义 TabBar。以下是自定义 TabBar 的步骤：

2.1 创建自定义 TabBar 组件

首先，我们需要创建一个自定义的 TabBar 组件。在 components 目录下创建一个新的组件，例如 custom-tabbar.vue。

<template>
  <view class="custom-tabbar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="switchTab(index)"
    >
      <image :src="currentIndex === index ? item.selectedIcon : item.icon" class="icon" />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          icon: "/static/tabbar/home.png",
          selectedIcon: "/static/tabbar/home-active.png"
        },
        {
          pagePath: "/pages/user/user",
          text: "用户",
          icon: "/static/tabbar/user.png",
          selectedIcon: "/static/tabbar/user-active.png"
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      uni.switchTab({
        url: this.tabList[index].pagePath
      });
    }
  }
};
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #e5e5e5;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 40rpx;
  height: 40rpx;
}

.active {
  color: #007AFF;
}
</style>

在这个组件中，我们定义了一个 tabList 数组，用于存储 TabBar 的各个项。通过 currentIndex 来跟踪当前选中的 TabBar 项，并通过 switchTab 方法实现页面切换。

2.2 在页面中使用自定义 TabBar

接下来，我们需要在页面中使用这个自定义的 TabBar 组件。假设我们有两个页面：index.vue 和 user.vue，我们可以在每个页面的底部引入自定义的 TabBar 组件。

<template>
  <view>
    <!-- 页面内容 -->
    <custom-tabbar />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar.vue';

export default {
  components: {
    CustomTabbar
  }
};
</script>

2.3 处理页面切换时的 TabBar 状态

为了确保 TabBar 的状态与当前页面保持一致，我们需要在页面加载时更新 currentIndex。可以在 onLoad 生命周期钩子中处理这个问题。

export default {
  onLoad() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1].route;
    const tabIndex = this.tabList.findIndex(item => item.pagePath === `/${currentPage}`);
    if (tabIndex !== -1) {
      this.currentIndex = tabIndex;
    }
  }
};

3. 总结

通过以上步骤，我们可以在 uniapp 中实现自定义的 TabBar。相比于默认的 TabBar 配置，自定义 TabBar 提供了更大的灵活性，允许我们根据项目需求进行样式和功能的定制。无论是简单的图标和文字切换，还是更复杂的交互效果，都可以通过自定义 TabBar 来实现。