uni-app原生导航栏右侧按钮必须通过pages.json的titlenview配置，不可用dom元素；仅app-plus生效，h5/小程序需降级；图标须本地ttf且路径严格匹配；点击事件用onnavigationbarbuttontap捕获并调用uni.navigateto跳转。
uni-app 自定义导航栏右侧按钮必须用 titleNView
直接在页面里写 <view></view> 或 <button></button> 放右边，真机上根本点不到——因为原生导航栏和 webview 是分离的，自定义 DOM 元素不会覆盖在原生标题栏之上。
唯一可靠的方式是通过 pages.json 配置 titleNView，它才是 App 端真正渲染原生导航栏的机制。H5 和小程序端不走这套逻辑，所以这个配置只对 app-plus 生效。
- 必须把按钮定义在
pages.json对应页面的style.app-plus.titleNView.buttons数组里 -
text或fontSrc二选一：纯文字用text；图标用本地 ttf 字体（如 iconfont），填fontSrc路径 +text设为空字符串 -
float: "right"才能靠右，"left"是靠左（别写成left不加引号，会报错） - 按钮点击事件统一由页面生命周期函数
onNavigationBarButtonTap捕获，参数e是数组索引（从 0 开始）
按钮点击跳转必须用 uni.navigateTo 而非 this.$router.push
onNavigationBarButtonTap 是原生层回调，此时 Vue 实例可能还没 ready，this.$router 在某些低端安卓机型上会 undefined，直接调用会静默失败。
正确做法是用 uni.navigateTo，它跨平台稳定，且不依赖当前组件实例状态：
抖音最具商业价值 KOL（对标账号）
下载
抖音最具商业价值意见领袖（KOL）适合内容创作者、运营、营销、品牌方在用户想找值得合作的抖音达人时使用，帮助基于输入材料生成相关创作者 / KOL、对标账号候选、合作和竞品研究线索。
onNavigationBarButtonTap(e) {
// e.index 是你配置 buttons 数组里的第几个按钮
if (e.index === 0) {
uni.navigateTo({ url: '/pages/add/add' });
}
}
- 不要在
onNavigationBarButtonTap里访问this.xxx，除非你确认组件已 mounted（比如加个if (this.$options.name)守卫） - 如果需要传参，
url里拼 query，例如/pages/add/add?from=home - H5 端不触发该回调，需额外在页面 DOM 区域手动放一个隐藏按钮并监听 click，做降级兼容
图标字体必须本地化且路径严格匹配
uni-app 不支持在线加载 iconfont CSS 或远程 ttf，所有字体文件必须下载后放进 /static/iconfont/ 这类本地目录，并在 pages.json 中写绝对路径。
- 路径必须以
/static/开头，不能用@/static/或相对路径 - tff 文件名要和
fontSrc值完全一致，包括大小写和扩展名（如iconfont.ttf） - 字体文件需包含对应 Unicode 字符，建议用 iconfont 官网「下载至本地」→「Font Class」方式导出，再手动复制 ttf
- 测试时可先用
text: "+"确认按钮位置和点击逻辑，再换图标
多按钮排列顺序和间距无法精细控制
titleNView.buttons 只支持横向依次排列，顺序就是数组顺序，但左右间距、图标大小、对齐方式全由原生系统决定，无法用 CSS 调整。
- iOS 上按钮间距较宽松，Android（尤其旧版）可能挤在一起，甚至重叠
-
fontSize只影响文字按钮，对图标按钮无效；图标实际大小取决于 ttf 文件中 glyph 的设计 - 超过两个按钮时，部分 Android 机型会自动缩放或截断，建议最多放两个（如「+」和「消息」）
- 若需更复杂交互（如 Badge 提示、长按菜单），得放弃原生按钮，改用自定义导航栏（
navigationStyle: custom），自己用<view></view>实现，但会失去原生性能和沉浸感
原生按钮的本质是快捷入口，不是 UI 控件——它的价值在于轻量、可靠、省电，而不是像素级可控。真要追求抖音那种带红点、动画、悬停反馈的「主页右侧操作区」，就得切到 nvue 或自定义导航栏方案，那已经是另一套渲染逻辑了。
