uniapp 顶部导航栏点击事件

UniApp 是一款基于 Vue.js 的跨平台 UI 组件库，它支持快速构建原生应用。顶部导航栏（通常称为 Navbar 或 TabBar）在 UniApp 中用于组织应用的主要功能和导航。当你想要在顶部导航栏上添加点击事件时，你可以按照以下步骤操作：

在 .vue 文件中，在 template 部分，为导航栏添加按钮或者标签，并设置 @click 事件，例如：<template>
<uni-navigator :navigator-style="{customTitle: true}">
<view class="tabbar">
<navigator-item v-for="(item, index) in navigationItems" :key="index" :title="item.title" @click="handleNavItemClick(index)">
<navigator-view :url="item.url" />
</navigator-item>
</view>
</uni-navigator>
</template>
登录后复制

在 methods 部分定义 handleNavItemClick 方法，该方法会接收导航项的索引作为参数：<script>
export default {
data() {
return {
navigationItems: [
{ title: '首页', url: '/pages/home/home' },
{ title: '详情', url: '/pages/detail/detail' },
// 更多选项...
]
};
},
methods: {
handleNavItemClick(index) {
this.$router.push(this.navigationItems[index].url); // 使用 Vue Router 进行页面跳转
}
}
};
</script>
登录后复制

如果使用的是 uni-app-router，则可以使用导航守卫（guards）来处理点击事件，比如权限控制。