uniapp实现tabBar功能常见的方法_uniapp tabbar

在 UniApp 中实现 Tab 功能通常涉及到使用 <navigator> 组件结合 tabBar 配置，或者通过自定义的视图切换逻辑来实现。以下是两种常见的实现方式：

1. 使用 tabBar 配置

UniApp 支持在 pages.json 文件中配置 tabBar，以在应用的底部或顶部显示标签栏。以下是一个简单的配置示例：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/logs/logs",
      "style": {
        "navigationBarTitleText": "日志"
      }
    },
    // ... 其他页面
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "static/tabbar/logs.png",
        "selectedIconPath": "static/tabbar/logs-selected.png",
        "text": "日志"
      },
      // ... 其他标签
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

在这个例子中，tabBar 配置定义了一个底部标签栏，包含两个标签：首页和日志。每个标签都有一个页面路径、默认图标路径、选中时的图标路径和文本。

2. 自定义 Tab 视图

如果你需要更复杂的 Tab 功能（例如，带有滑动动画、自定义样式或特殊交互），你可能需要自定义 Tab 视图。这通常涉及到使用 <scroll-view> 组件或其他布局组件来创建标签栏，并结合 <navigator> 组件或编程式导航来实现页面切换。

以下是一个简单的自定义 Tab 视图示例：

<template>
  <view class="tab-container">
    <view class="tab-bar">
      <view 
        class="tab-item" 
        v-for="(item, index) in tabs" 
        :key="index" 
        @click="navigateTo(item.path)" 
        :class="{ active: currentIndex === index }"
      >
        {{ item.text }}
      </view>
    </view>
    <view class="tab-content">
      <!-- 这里可以放置一个用于显示当前页面内容的插槽或组件 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { path: '/pages/index/index', text: '首页' },
        { path: '/pages/logs/logs', text: '日志' },
        // ... 其他标签
      ],
      currentIndex: 0, // 当前选中的标签索引
    };
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
      this.currentIndex = this.tabs.findIndex(tab => tab.path === path);
    },
  },
};
</script>

<style>
/* 这里添加样式 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

在这个例子中，我们使用了一个包含 tab-bar 和 tab-content 的视图容器。tab-bar 中包含了一系列的 tab-item 视图，它们使用 v-for 指令循环渲染 tabs 数组中的标签。每个 tab-item 都有一个点击事件处理器 navigateTo，用于导航到相应的页面，并更新当前选中的标签索引。你可以根据需要添加动画、样式和交互来改进这个示例。