UniappVUE3自定义导航栏小程序

### 一、UniApp Vue3 自定义导航栏概述 在 UniApp 中，通过 `pages.json` 配置全局导航栏无法满足动态权限控制的需求。因此，可以通过创建自定义导航栏来解决这一问题[^1]。将底部导航栏设计成独立的组件，并将其与其他页面逻辑解耦，能够更好地适配不同场景下的需求。 --- ### 二、实现方案详解 #### 1. 创建自定义导航栏组件 为了提高代码复用性和可维护性，建议将导航栏封装为一个单独的组件。以下是具体实现方式： ```vue <template> <view class="custom-tabbar"> <view v-for="(item, index) in tabList" :key="index" @click="switchPage(item)"> <image :src="currentIndex === item.pagePath ? item.selectedIconPath : item.iconPath"></image> <text :class="{ active: currentIndex === item.pagePath }">{{ item.text }}</text> </view> </view> </template> <script setup> import { ref } from 'vue'; const props = defineProps({ tabList: { type: Array, required: true, }, }); const emit = defineEmits(['change']); // 当前选中的路径 const currentIndex = ref('/pages/home/index'); function switchPage(pageInfo) { if (pageInfo.pagePath !== currentIndex.value) { uni.navigateTo({ url: pageInfo.pagePath }); currentIndex.value = pageInfo.pagePath; emit('change', pageInfo); } } </script> <style scoped> .custom-tabbar { display: flex; justify-content: space-around; align-items: center; height: 100px; background-color: white; } .active { color: blue; } </style> ``` 上述代码实现了基础的自定义导航栏功能，其中 `tabList` 是传入的数据源，用于配置导航项的内容和跳转地址[^2]。 --- #### 2. 动态数据绑定与权限管理 如果需要根据用户的登录状态或角色权限调整导航栏内容，则可以在父级页面中传递动态生成的 `tabList` 数据给子组件。例如： ```javascript export default { data() { return { userRole: 'admin', tabsConfig: [ { text: '首页', iconPath: '/static/icons/home.png', selectedIconPath: '/static/icons/home-active.png', pagePath: '/pages/home/index' }, { text: '订单', iconPath: '/static/icons/order.png', selectedIconPath: '/static/icons/order-active.png', pagePath: '/pages/orders/index' }, { text: '设置', iconPath: '/static/icons/settings.png', selectedIconPath: '/static/icons/settings-active.png', pagePath: '/pages/settings/index' }, ], }; }, computed: { filteredTabs() { const adminOnlyPages = ['/pages/admin/dashboard']; return this.tabsConfig.filter(tab => !adminOnlyPages.includes(tab.pagePath) || this.userRole === 'admin'); }, }, }; ``` 在此基础上，将计算属性 `filteredTabs` 绑定到自定义导航栏组件即可完成动态渲染。 --- #### 3. 页面切换优化 为了避免每次点击导航按钮都触发页面重新加载的问题，可以采用单页应用（SPA）的方式处理路由变化。即在同一页面内嵌套多个子组件作为目标页面，仅隐藏/显示对应的部分而无需刷新整个页面。 示例代码如下： ```html <!-- App.vue --> <template> <view> <!-- 导航栏 --> <CustomTabBar :tab-list="filteredTabs" /> <!-- 子页面容器 --> <Home v-if="currentRoute === '/pages/home/index'" /> <Orders v-if="currentRoute === '/pages/orders/index'" /> <Settings v-if="currentRoute === '/pages/settings/index'" /> </view> </template> <script> import CustomTabBar from './components/CustomTabBar'; import Home from './pages/Home'; import Orders from './pages/Orders'; import Settings from './pages/Settings'; export default { components: { CustomTabBar, Home, Orders, Settings }, data() { return { currentRoute: '/pages/home/index', }; }, methods: { handleTabChange(selectedItem) { this.currentRoute = selectedItem.pagePath; }, }, }; </script> ``` 这种方式不仅提升了用户体验流畅度，还解决了传统多页面模式下生命周期函数不可控的问题。 --- ### 三、注意事项 - **兼容性测试**：由于小程序平台众多（微信、支付宝等），需确保自定义导航栏样式能在各个平台上正常运行。 - **性能调优**：当项目规模较大时，应考虑懒加载技术减少初始加载时间。 - **事件监听**：对于某些特殊业务逻辑可能需要用到原生 API 的情况下，请注意合理使用 `uni.onTabItemTap()` 方法捕获用户操作行为。 ---