阅读 525

微信小程序自定义顶部导航栏

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

小程序提供的顶部导航栏字体颜色仅支持 #ffffff 和 #000000两种,因其局限性多数情况需要自定义导航栏 导航栏替换基本流程如下

  1. 去掉原有小程序自带的导航栏;
  2. 计算导航栏高度。避免部分页面使用自带导航栏导致高度不一致的情况;
  3. 确定标题文字位置。

去掉顶部这个不太好看的黑壳壳子;

image.png 情况一:个别页面自定义 在当前页面所属的json配置文件中修改如下:

{
  "usingComponents": {},
  "navigationStyle": "custom"
}
复制代码

情况二:全部页面自定义 在全局json配置文件(app.json)中修改windows参数如下(没有windows配置的手动添加):

"window": {
    "navigationStyle": "custom"
},
复制代码

此时效果:

image.png

获取状态栏高度

注:获取的高度单位是px

wx.getSystemInfo({
	success: res => {
		const statusBarHeight = res.statusBarHeight
	}
})
复制代码

状态栏高度即为图中骚粉色区域高度;

image.png

导航栏高度

骚粉区域的高度再加上xie红色区域的高度就是我们自定义的导航栏高度

所有的机型导航栏高度都是状态栏高度加上44px

	const navigationHeight = statusBarHeight + 44 + 'px';
复制代码

此时我们就找到了导航栏的高度

确定标题位置

标题和右上角的胶囊处于同一水平区域居中显示,如图黄色区域:

image.png 首先获取胶囊的位置信息(获取结果单位为px)

	const capsuleInfo = wx.getMenuButtonBoundingClientRect();
	//bottom: 胶囊底部距离屏幕顶部的距离
	//height: 胶囊高度
	//left:   胶囊左侧距离屏幕左侧的距离
	//right:  胶囊右侧距离屏幕左侧的距离
	//top:    胶囊顶部距离屏幕顶部的距离
	//width:  胶囊宽度
复制代码

我们只需要拿到胶囊的height值和top值即可完成标题文字定位

  <view class="title" style="height:{{height}}px;top:{{top}}px;">标题</view>
复制代码

结束

至此导航栏的替换已经完成,其它个性化样式根据自身需要调整即可。

文章分类
前端