uniapp导航标签

uniapp导航标签实现方法

在uniapp中实现导航标签通常使用uni-app内置组件或自定义组件，以下是几种常见方法：

使用uniapp原生tabBar 在pages.json中配置tabBar属性，示例如下：

{
  "pages": [
    {"path": "pages/home/home", "style": {}},
    {"path": "pages/category/category", "style": {}},
    {"path": "pages/user/user", "style": {}}
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "static/tabbar/category.png",
        "selectedIconPath": "static/tabbar/category-active.png"
      }
    ]
  }
}

自定义导航组件 创建自定义组件实现更灵活的导航：

<template>
  <view class="custom-tabbar">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      @click="switchTab(item.pagePath)"
    >
      <image :src="current === index ? item.selectedIconPath : item.iconPath"/>
      <text :class="{active: current === index}">{{item.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [
        {pagePath: '/pages/home/home', text: '首页', iconPath: '/static/home.png', selectedIconPath: '/static/home-active.png'},
        {pagePath: '/pages/category/category', text: '分类', iconPath: '/static/category.png', selectedIconPath: '/static/category-active.png'}
      ]
    }
  },
  methods: {
    switchTab(path) {
      uni.switchTab({
        url: path
      })
    }
  }
}
</script>

使用第三方UI库 如uView等UI库提供增强型tabbar组件：

<template>
  <u-tabbar 
    :list="tabList" 
    :mid-button="true"
    @change="change"
  ></u-tabbar>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {iconPath: "home", selectedIconPath: "home-fill", text: "首页"},
        {iconPath: "photo", selectedIconPath: "photo-fill", text: "分类"}
      ]
    }
  }
}
</script>

导航标签样式优化技巧

添加过渡动画 通过CSS实现切换动画效果：

.custom-tabbar {
  transition: all 0.3s ease;
}
.custom-tabbar view.active {
  transform: scale(1.1);
}

实现徽标提示 在tabbar项上添加数字角标：

<view class="tab-item">
  <u-badge :count="10"></u-badge>
  <text>消息</text>
</view>

适配不同平台 通过条件编译处理平台差异：

// #ifdef H5
const tabbarHeight = 50
// #endif
// #ifdef APP-PLUS
const tabbarHeight = 60
// #endif

注意事项

• 原生tabBar在微信小程序中高度固定为50px，在App端可自定义
• 自定义组件方式需要自行处理页面返回时的选中状态同步
• 使用uni.switchTab跳转时会关闭所有非tab页面
• 在H5端自定义tabbar需要处理路由同步问题
• tabbar图标建议使用尺寸为50*50px的图片