uniapp导航键

添加导航键的方法

在UniApp中实现导航键功能，通常涉及自定义底部导航栏或使用原生导航组件。以下是两种常见方案：

自定义底部导航栏
通过<view>和CSS样式模拟导航键，结合uni.switchTab或uni.navigateTo实现页面切换。示例代码：

<template>
  <view class="tab-bar">
    <view @click="switchTab('/pages/home/home')" class="tab-item">首页</view>
    <view @click="switchTab('/pages/user/user')" class="tab-item">我的</view>
  </view>
</template>

<script>
export default {
  methods: {
    switchTab(url) {
      uni.switchTab({ url });
    }
  }
};
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
</style>

使用原生导航配置
在pages.json中配置tabBar属性，定义原生底部导航栏：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home-active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "static/user.png",
        "selectedIconPath": "static/user-active.png"
      }
    ],
    "color": "#999",
    "selectedColor": "#007AFF"
  }
}

注意事项

• 自定义导航需处理iPhone X等机型的底部安全区域，可通过CSS变量--safe-area-inset-bottom适配。
• 原生tabBar仅支持静态配置，动态修改需通过条件渲染或重写导航逻辑。
• 导航键样式需兼顾不同平台（iOS/Android）的UI规范，确保一致性。

扩展功能

• 徽标提示：通过uni.setTabBarBadge动态添加未读消息标识。
• 动态隐藏：在特定页面使用uni.hideTabBar隐藏导航栏。

以上方法可根据项目需求选择，原生配置性能更优，自定义方案灵活性更高。