微信小程序自定义导航栏兼容适配所有机型

Posted 2023-02-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序自定义导航栏兼容适配所有机型相关的知识，希望对你有一定的参考价值。

参考技术A <blockquote>目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。</blockquote><div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-c85b39b2671d31b7.jpeg " img-data=""format":"jpeg","size":14897,"height":141,"width":963" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以全局配置//app.json
"window":
"navigationStyle": "custom"

单页面配置//page.json

"navigationStyle": "custom"

效果对比
<div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-1d120c002c6ef37c.jpeg " img-data=""format":"jpeg","size":17446,"height":352,"width":922" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域。每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。1.获取导航栏高度及按钮位置
微信提供了获取导航栏高度的Api和胶囊按钮位置的Api
// 系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
在控制台打印出这两个Api返回结果<div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-7925dd39fb0ec47a.jpeg " img-data=""format":"jpeg","size":39744,"height":497,"width":679" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>这里面我们只说几个我们接下来用到的参数。statusBarHeight // 状态栏高度
screenWidth // 胶囊的宽度

top // 胶囊到顶部距离
height // 胶囊的高度
right // 胶囊距离右边的距离
通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）
首先在app.js中定义全局data-globalDataglobalData:
navBarHeight: 0, // 导航栏高度
menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
,
新建个方法
setNavBarInfo()
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuHeight = menuButtonInfo.right;

在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在app.js
中调用及设置data。 onLaunch()
this.setNavBarInfo()
,
到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。
2.页面适配首先page.js中定义变量var app = getApp()
Page(
/*
* 页面的初始数据
/
data:
navBarHeight: app.globalData.navBarHeight, //导航栏高度
menuBotton: app.globalData.menuBotton, //导航栏距离顶部距离
menuRight: app.globalData.menuRight, //导航栏距离右侧距离
menuHeight: app.globalData.menuHeight, //导航栏高度

)
页面使用
<view class="nav" style="height:navBarHeightpx;">
<view class="nav-main">

<view
class="capsule-box" style="style="height:menuHeight+menuBotton 2px; min-height:menuHeightpx; line-height:menuHeightpx; bottom:0px;padding:0 menuRightpx;">

<slot></slot>
</view>
</view>
</view>
wxss
/ 公共导航 */
.nav
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
width: 100vw;
z-index: 1000;

.nav-main
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;

.nav .capsule-box
position: absolute;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;

最终效果<div class="image-package"><img src=" https://upload-images.jianshu.io/upload_images/8877503-ef017724a144e58c.jpeg " img-data=""format":"jpeg","size":4933,"height":105,"width":349" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div>
此种适配方案适应所有手机，应该说是最优的选择。

以上是关于微信小程序自定义导航栏兼容适配所有机型的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序自定义navigationBar