uniapp导航菜单

uniapp导航菜单实现方法

使用uni-ui的TabBar组件

在pages.json中配置tabBar选项：

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/tabbar/home.png",
      "selectedIconPath": "static/tabbar/home-active.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "static/tabbar/user.png",
      "selectedIconPath": "static/tabbar/user-active.png"
    }
  ]
}

自定义顶部导航栏

在页面配置中设置navigationStyle为custom：

{
  "path": "pages/custom/custom",
  "style": {
    "navigationStyle": "custom"
  }
}

页面中使用自定义导航组件：

<template>
  <view>
    <custom-nav title="自定义标题" :back="true"></custom-nav>
    <!-- 页面内容 -->
  </view>
</template>

侧边抽屉菜单

使用uni-drawer组件实现：

<template>
  <view>
    <uni-drawer ref="drawer" mode="left">
      <view class="drawer-content">
        <!-- 菜单内容 -->
      </view>
    </uni-drawer>
    <button @click="openDrawer">打开菜单</button>
  </view>
</template>

<script>
export default {
  methods: {
    openDrawer() {
      this.$refs.drawer.open()
    }
  }
}
</script>

动态导航菜单

通过v-for循环渲染导航项：

<template>
  <view class="nav-menu">
    <view 
      v-for="(item, index) in menuList" 
      :key="index"
      @click="navigateTo(item.path)"
    >
      <image :src="item.icon"></image>
      <text>{{item.text}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {text: '首页', icon: '/static/home.png', path: '/pages/index'},
        {text: '分类', icon: '/static/category.png', path: '/pages/category'}
      ]
    }
  }
}
</script>

导航菜单样式优化

为导航菜单添加CSS样式：

.nav-menu {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.nav-menu view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.nav-menu image {
  width: 24px;
  height: 24px;
}

.nav-menu text {
  font-size: 12px;
  margin-top: 4px;
}