uniapp如何将底部导航组件化

组件化底部导航的实现方法

在Uniapp中实现底部导航组件化，可以通过自定义组件的方式完成。以下是具体实现步骤：

创建自定义导航组件 新建一个组件文件如/components/tab-bar/tab-bar.vue，结构如下：

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

<script>
export default {
  props: {
    selected: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [
        {
          pagePath: "/pages/index/index",
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/home-active.png",
          text: "首页"
        },
        {
          pagePath: "/pages/user/user",
          iconPath: "/static/tabbar/user.png",
          selectedIconPath: "/static/tabbar/user-active.png",
          text: "我的"
        }
      ]
    }
  },
  methods: {
    switchTab(item) {
      uni.switchTab({
        url: item.pagePath
      })
    }
  }
}
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #fff;
  box-shadow: 0 -1px 6px rgba(0,0,0,.1);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
}
.tab-item image {
  width: 24px;
  height: 24px;
}
.tab-item text {
  display: block;
  font-size: 12px;
  color: #999;
}
.tab-item text.active {
  color: #007AFF;
}
</style>

在页面中使用组件 在需要显示底部导航的页面中引入组件：

<template>
  <view>
    <!-- 页面内容 -->
    <tab-bar :selected="currentPage"></tab-bar>
  </view>
</template>

<script>
import tabBar from '@/components/tab-bar/tab-bar.vue'
export default {
  components: { tabBar },
  data() {
    return {
      currentPage: '/pages/index/index'
    }
  }
}
</script>

动态路由匹配方案

对于需要根据当前路由自动高亮导航项的情况，可以通过监听路由变化实现：

onShow() {
  const pages = getCurrentPages()
  this.currentPage = '/' + pages[pages.length - 1].route
}

全局注册方案

如需在所有页面使用，可以在main.js中全局注册组件：

import tabBar from '@/components/tab-bar/tab-bar.vue'
Vue.component('tab-bar', tabBar)

注意事项

底部导航组件需要使用position: fixed定位固定在底部。页面内容区域需要预留底部导航的高度，防止内容被遮挡。

在pages.json中需要配置tabBar的页面为"style": { "navigationBarTitleText": "..." }，避免原生导航栏与自定义导航栏冲突。

组件中的路由跳转应使用uni.switchTab方法，确保正确切换到tabbar页面。