小程序自定义导航栏兼容适配所有机型（附完整案例）_https://chat18.aichatos8.xyz/ - CSDN文库

149 浏览量更新于2023-03-16 评论 1 收藏 145KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

小程序自定义导航栏兼容适配所有机型（附完整案例）小程序自定义导航栏兼容适配所有机型（附完整案例）

主要介绍了小程序自定义导航栏兼容适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大

家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

大部分情况下我们都是使用微信官方自带的 navigationBar 配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回

首页按钮等。

思路思路

隐藏官方导航栏

获取胶囊按钮、状态栏相关数据以供后续计算

根据不同机型计算导航栏高度

编写新的导航栏

页面引用自定义导航

正文正文

隐藏官方导航栏隐藏官方导航栏

隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。

全局隐藏

//app.json

"window": {

"navigationStyle": "custom"

}

页面隐藏

//page.json

{

"navigationStyle": "custom"

}

获取胶囊按钮、状态栏相关数据以供后续计算

公式：导航栏高度 = 状态栏到胶囊的间距（胶囊距上边界距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。由公式得知，我

们需要获取状态栏高度胶囊高度胶囊距上距离

注：状态栏到胶囊的间距 = 胶囊到下边界距离。所以这里需要*2

状态栏高度状态栏高度

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38610513

粉丝: 9
资源: 904

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈