微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题

1. 导航栏计算：

导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度）*2

navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;

2. 获取胶囊信息

let menuButtonObject = wx.getMenuButtonBoundingClientRect();

3.底部小黑条高度：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

需要适配的机型，使用safeArea中的bottom，得到安全区域底部纵坐标，然后使用screenHeight减去bottom就能得到小黑条的高度

//获取小黑条高度
this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; //获取数据bottomLHeight: app.globalData.botomLHeight,//底部黑条距离//结构  页面底部加
<view class="blacklHeight" style="height: {{bottomLHeight}}px;"></view>

4.具体代码

wx.getSystemInfo({success: res => {this.globalData.height = res.statusBarHeight;// 状态栏高度let statusBarHeight = res.statusBarHeight;         // 获取胶囊信息let menuButtonObject = wx.getMenuButtonBoundingClientRect();//console.log(menuButtonObject)let navTop = menuButtonObject.top,//胶囊距离顶部距离navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;this.globalData.navHeight = navHeight; //导航栏总体高度this.globalData.navTop = navTop; //胶囊距离顶部距离this.globalData.navObj = menuButtonObject.height; //胶囊高度this.globalData.navObjWid = navObjWid; //胶囊宽度(包括右边距离)// 底部小黑条高度this.globalData.botomLHeight = res.screenHeight-res.safeArea.bottom; }})

拿到数据

navHeight: app.globalData.navHeight, //导航栏高度
navTop: app.globalData.navTop, //导航栏距顶部距离
navObj: app.globalData.navObj, //胶囊的高度
navObjWid: app.globalData.navObjWid, //胶囊宽度+距右距离

结构布局

<view  class='nav-wrap' style='height: {{navHeight}}px;' ><view class='nav-title' style='height:{{navObj}}px;margin-top:{{navTop}}px;line-height:{{navObj}}px;'>{{navbarData.title}}</view><view style='display: flex; justify-content: space-around;flex-direction: column'><!-- // 导航栏  左上角的返回按钮 和home按钮 --><view class='nav-capsule' style='height: {{navObj}}px;margin-top:{{navTop}}px;'><!-- //从分享进入小程序时 返回上一级按钮不应该存在 --><view bindtap='_navback' wx:if='{{!share}}'><van-icon name="arrow-left" /></view></view>  </view>
</view>

样式代码

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {position: fixed;width: 100%;top: 0;background: #fff;color: #000;z-index: 9999999;
}
/* 标题要居中 */
.nav-title {position: absolute;text-align: center;max-width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;top: 0;left: 0;right: 0;bottom: 0;margin: auto;color: #000;font-size: 30rpx;font-weight: 500;
}.nav-capsule {display: flex;align-items: center;margin-left: 30rpx;width: 140rpx;justify-content: space-between;height: 100%;
}.navbar-v-line {width: 1px;height: 32rpx;background-color: #e5e5e5;
}.back-pre, .back-home {width: 50rpx;height: 50rpx;margin-top: 4rpx;padding: 10rpx;
}
.nav-capsule .back-home {width: 36rpx;height: 40rpx;margin-top: 3rpx;
}
.userinfo-avatar {overflow: hidden;width: 58rpx;height: 58rpx;margin: 2rpx;border-radius: 50%;
}

注：如果使用后页面出现滚动轴可加如下代码：

wxml最外层：

<view class="SetTopNavContainer" style="max-height:100vh;overflow-y: auto;"></view>

微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题相关推荐

（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序自定义头部导航栏
1.微信自定义头部:app.json里面配置: "navigationStyle": "custom" 2.建立一个navigationBar的公共组件: A. ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）
文章目录前言正文 JSON navBar.js navBar.wxml navBar.wxss test1.wxml 展示效果总结前言微信小程序中导航栏一般来说是默认的展示标题等等,可以做的 ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...

微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题

微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题相关推荐

最新文章

热门文章