微信小程序自定义导航栏【超详细】

前言

开发过程中,总会遇到ui给出的风格迥异的导航栏。比如:导航栏背景颜色渐变、导航栏背景是图片,等等。如果只用微信提供的navigationBarBackgroundColor肯定无法满足这些需求,因为它只能设置16进制的颜色,所以我们需要自定义导航栏,从而满足这些需求。

知识点

wx.getMenuButtonBoundingClientRect()

自定义导航栏我们一定要认识到这个方法,它可以获取菜单按钮(右上角胶囊按钮)的布局位置信息,通过该方法提供的信息,我们就能完美兼容不同屏幕的导航栏。

这是getMenuButtonBoundingClientRect所获取到的数据,咋一看不好理解,所以我给出了下面这张图,以下图解就很清楚了

步骤

  1. page.json 局部设置中取消自带的导航栏
json 复制代码
"navigationStyle": "custom"
  1. onLoad() 生命函数中获取胶囊信息,并通过胶囊信息设置自定义导航栏样式
js 复制代码
onLoad() {
    const {
        width,
        height,
        top,
        bottom,
        left,
        right
    } = wx.getMenuButtonBoundingClientRect();
    
    this.setData({
        tapNavSty: `height: ${bottom}px`
    });
}
  1. 样式文件中,设置导航栏容器的基本样式
wxss 复制代码
.top-nav-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: linear-gradient(to bottom right, blue, pink);
}
  1. 模板文件中,绑定动态获取的导航栏高度
wxml 复制代码
<view class="top-nav-box" :style="topNavSty">

</view>
  1. 这样就得到自定义的导航栏效果啦

总结

理解getMenuButtonBoundingClientRect获取的胶囊信息,并且取消自带的导航栏,最终设置自定义导航栏,设置导航栏容器的基本样式时不仅仅可以设背景色,还是设置背景图片,从而满足设计需求啦

相关推荐
拾光拾趣录4 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00005 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl6 分钟前
深度剖析Kafka读写机制
前端
FogLetter7 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan7 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan8 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan10 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录10 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee10 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我11 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html