uni-app原生导航栏右侧文字不支持渐变色，必须用custom导航栏+view模拟并配合background-clip: text实现，小程序需canvas降级绘制。
uni-app导航栏右侧文字不支持直接渐变色
uni-app 的原生导航栏（navigationBar）右侧按钮（如 rightText、rightIcon）由系统渲染，所有端都不支持 CSS 渐变、background-clip: text 或自定义字体渲染。你无法通过 pages.json 的 rightTextStyle 或 JS API 设置渐变颜色——这个字段只接受纯色字符串（如 "#ff6b6b"），且仅控制文字填充色，无渐变能力。
必须用 custom 导航栏 + view 模拟右侧文字
要实现右侧文字渐变效果，唯一可行路径是关闭原生导航栏，手写一个
- 在
pages.json对应页面设"navigationStyle": "custom" - 用
分享 rightText - 样式中必须用
background-clip: text - H5 端需加
display: inline-block或inline-flex才能让裁剪生效 - 微信小程序 Android 真机基本不支持
-webkit-background-clip: text，iOS 14+ 部分机型可勉强工作，但不稳定
示例样式：
.nav-right {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
font-weight: bold;
padding: 0 12px;
}
小程序端 fallback：canvas 绘制右侧文字
当 background-clip 在小程序真机失效时，不能靠“降级为纯色”了事——右侧文字若与背景同色会不可见。此时需用 动态绘字：
- 在模板中放
- 在
onReady中调用uni.createCanvasContext('rightTextCanvas') - 用
ctx.createLinearGradient()（不是 CSS 字符串）生成渐变，再ctx.setFillStyle(gradient) -
ctx.fillText('分享', x, y)的y值要加约+6补偿 baseline 偏移 - 安卓 Canvas 文字抗锯齿差，字号建议 ≥14px，避免模糊或断线
滚动时右侧文字渐变联动的坑
如果右侧文字渐变需随页面滚动变化（比如从透明渐变为高饱和），别在 onPageScroll 里每帧重绘 canvas 或反复 setStyle——这会导致 iOS 卡顿、安卓掉帧：
- 只在
scrollTop跨越关键阈值（如 0→30px、30→100px）时才触发一次重绘 - 渐变色计算逻辑抽到
computed或ref，避免每次滚动都 new Gradient 实例 - iOS Safari 对同一 canvas 多次调用
createLinearGradient有缓存 bug，需先ctx.clearRect()再重建 - 不要用
opacity控制文字可见性——它会让 canvas 绘制的文字发虚，应改用ctx.globalAlpha或切换 fillStyle
最易被忽略的是：右侧文字区域高度、行高、垂直居中必须和原生导航栏严格对齐，否则滚动过程中会出现视觉跳动；而 --status-bar-height 在部分安卓机型上返回 0，得用 getSystemInfoSync().statusBarHeight || 20 容错。
