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": "日志"},// ... 其他标签]}
}

在这个例子中，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>

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