微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦
在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。
实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。
完全需要根据手机，动态的计算高度。
先看一些小程序顶部导航栏适配的情况
图一 某团 图二 某乎 图三 某东 图四 某拉
上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。
为解决这个问题就要搞清楚原理
这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）
而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了
观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的
也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了
wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top）
所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度
用这两个API 我们可以得到如下的数据
导航栏整体高度 伪呆
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦相关推荐
- 微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值 整个导航栏的高度: ...
- 微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图 实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
- 微信小程序-自定义导航栏
微信小程序-自定义导航栏 第一步 添加属性 "navigationStyle": "custom" 第二步 自定义导航栏 第二步 自定义组件 第四步 使用组件 ...
- 微信小程序自定义导航栏 navigation bar 返回键 首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件 版本号:2.0.0 作者:chen-yt github: https://g ...
- 微信小程序自定义导航栏组件
效果图 首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏 一.子组件-wxml <vi ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 {"navigationStyle": "custom" // 将navigatio ...
- 微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
- 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中 页面的 title 只支持纯文本级别的样式控 ...
最新文章
- 马来西亚拟对打车软件巨头Grab罚款2000万美元
- 计算机组装与维护教案_计算机组装与维护小课堂（1）
- 【HeadFirst设计模式】8.模板方法模式
- 7添加静态路由 hat red_两个不同网段的路由器，如何互通？
- Lua——循环和流程控制(if,for,while,break,goto,repeat...until)
- java8 日期api_我们多么想要新的Java日期/时间API？
- c51编程语言基础习题,《单片机基础》练习题及答案
- 计算机不能辨别汉字wifi,Win10系统连接不上被隐藏的中文Wifi的解决方法
- Leetcode 335. 路径交叉(Self Crossing)
- HDU1799 循环多少次？
- 如何使用PowerShell创建简单SQL Server数据库登录对话框
- LRU最少最近使用缓存策略
- linux tcp文件分包_Linux c实现一个tcp文件服务器和客户端
- educoder第六章 关联挖掘 实验二：FP-growth
- 全球气象数据的网站集合数据包含（大气数据、海洋数据等各种数据）
- java poi xml转word文档_使用POI转换word doc文件
- 【51单片机】蜂鸣器程序
- 3dmax材质丢失插件_3dmax找丢失贴图的材质插件怎么用
- Openssl学习——x509证书函数
- 这些 Google 高级搜索技巧，你都知道么？