自定义底部导航栏组件

custom-tab-bar 是 Uniapp 中用于自定义页面底部或顶部导航栏的组件，主要用于 H5 平台。与原生 tabBar 相比，custom-tab-bar 提供了更灵活的布局和样式配置，特别适合 PC 端的宽屏布局。

1. 什么是 custom-tab-bar 组件？

custom-tab-bar 组件允许开发者根据需求自定义页面的导航栏（tabBar），并摆放在顶部、底部或页面的任意位置。与 pages.json 中的原生 tabBar 不同，自定义 tabBar 更灵活，特别适合 H5 端的自定义布局需求。它仍然读取 pages.json 中的 tabBar 配置信息，同时支持与 tabBar 相关的所有 API，例如设置 tab 徽标、显示红点以及 switchTab 等。

使用场景

• 顶部导航：在 PC 端使用自定义的 tabBar 放置在页面顶部，作为一级导航栏。
• 自定义布局：根据页面需求自由配置 tabBar 的排列方向、图标、样式等。
• 跨页面共享导航：通过自定义组件实现跨页面共享导航结构。

2. custom-tab-bar 组件的常用属性

custom-tab-bar 提供了丰富的属性用于配置 tabBar 的样式及行为。以下是常用属性的详细说明及使用示例：

属性名	类型	默认值	说明
direction	String	horizontal	选项的排列方向，可选值：horizontal（水平），vertical（垂直）
show-icon	Boolean	false	是否显示 tabBar 项的图标
selected	Number	0	选中的 tabBar 项索引值，从 0 开始
onTabItemTap	EventHandle		tabBar 项目被点击时的事件回调，返回被点击的 tab 项相关信息

2.1 设置 direction 属性

• 说明：通过 direction 属性设置 tabBar 选项的排列方向，可以设置为水平或垂直排列。
• 类型：String
• 默认值：horizontal

<template>
  <view>
    <!-- 水平排列的 tabBar -->
    <custom-tab-bar direction="horizontal" :selected="selected" @onTabItemTap="onTabItemTap" />
    
    <!-- 垂直排列的 tabBar -->
    <custom-tab-bar direction="vertical" :selected="selected" @onTabItemTap="onTabItemTap" />
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref(0);  // 当前选中的 tabBar 项索引

    const onTabItemTap = (item) => {
      console.log('点击的 tab 项:', item);
    };

    return { selected, onTabItemTap };
  }
}
</script>

2.2 显示 tabBar 图标

• 说明：通过 show-icon 属性控制是否显示 tabBar 项的图标。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 显示图标的 tabBar -->
    <custom-tab-bar direction="horizontal" :show-icon="true" :selected="selected" @onTabItemTap="onTabItemTap" />
    
    <!-- 不显示图标的 tabBar -->
    <custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref(1);  // 当前选中的 tabBar 项索引

    const onTabItemTap = (item) => {
      console.log('点击的 tab 项:', item);
    };

    return { selected, onTabItemTap };
  }
}
</script>

2.3 处理 tabBar 点击事件

• 说明：通过 onTabItemTap 事件监听 tabBar 项的点击行为，并处理点击事件。
• 类型：EventHandle
• 默认值：无

<template>
  <view>
    <!-- 处理 tabBar 点击事件 -->
    <custom-tab-bar direction="horizontal" :selected="selected" @onTabItemTap="onTabItemTap" />
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref(0);  // 当前选中的 tabBar 项索引

    const onTabItemTap = (item) => {
      console.log('被点击的 tab 项:', item.index, item.text);
      selected.value = item.index;  // 更新当前选中的 tabBar 项
    };

    return { selected, onTabItemTap };
  }
}
</script>

3. 自定义水平与垂直 tabBar

以下案例展示了如何使用 custom-tab-bar 实现水平与垂直排列的 tabBar，包含图标、点击事件处理等完整功能。

<template>
  <view>
    <!-- 水平排列的 tabBar，显示图标 -->
    <custom-tab-bar
      direction="horizontal"
      :show-icon="true"
      :selected="selected"
      @onTabItemTap="onTabItemTap"
    />

    <!-- 垂直排列的 tabBar，不显示图标 -->
    <custom-tab-bar
      direction="vertical"
      :show-icon="false"
      :selected="selected"
      @onTabItemTap="onTabItemTap"
    />
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref(0);  // 当前选中的 tabBar 项索引

    // 处理 tabBar 点击事件
    const onTabItemTap = (item) => {
      console.log('点击的 tab 项:', item.index, item.text);
      selected.value = item.index;  // 更新选中的 tabBar 项
    };

    return { selected, onTabItemTap };
  }
}
</script>