微信小程序-自定义导航栏

最新推荐文章于 2025-05-26 11:23:29 发布

小凳子在线

最新推荐文章于 2025-05-26 11:23:29 发布

阅读量852

点赞数 13

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_53024519/article/details/140662904

参考文章：自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例） | 微信开放社区 (qq.com)

1. 设置导航栏样式自定义

"navigationStyle": "custom"

可以选择在页面json文件设置，也可选择在app.json文件设置，我选择页面配置

2. 定义想要的导航栏样式

.navCustom {
  position: fixed; 
  top: 0; 
  width: 100%;
  color: white;
  font-weight:bold;
  background: linear-gradient(to right, rgb(6, 194, 113) 30%, rgb(2, 169, 146));
}

最初最想要的是导航栏颜色渐变

3. 计算导航栏高度

    const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    //