1、为什么需要自定义导航栏
什么时候开始支持
微信客户端7.0.0 - 新增 框架 支持页面级自定义导航配置 navigationStyle: custom。
基础版本库 v1.9.5 (2018.01.24), 新增 配置 window.navigationStyle 支持全屏显示小程序 详情
目前支持全局的配置和单个页面的配置两种:
"navigationStyle": "custom"
复制代码
2、如何实现与官方一样效果导航条,以及如何扩展?
- 手机顶部信息栏的高度
- 微信小程序胶囊位置信息
微信小程序提供的API
- wx.getSystemInfo() 异步获取系统信息
- wx.getSystemInfoSync() 同步获取用户信息
- wx.getMenuButtonBoundingClientRect() 小程序胶囊的位置新信息
注意我们能够拿到的数值单位是
px
不是rpx
。【之后我也写一篇专门探究小程序单位】
wx.getSystemInfo({
success: (res) => {
// iphone6.statusBarHeight = 20
this.globalData.statusBarHeight = res.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
// 另一种计算方式
this.globalData.CustomBar =custom.height + ( custom.top - res.statusBarHeight) * 2;
}
})
复制代码
let custom = wx.getMenuButtonBoundingClientRect();
复制代码
代码演示
我们用iphoneX的模拟器为例子,因为iphoneX的信息导航栏比较高与别的不同,我们从特殊的更加明显。
<view class="bg" style="height:{{statusBarHeight}}px"></view>
<view class='jiaonang'
style='margin-top:{{custom.top - statusBarHeight}}px; height:{{custom.height}}px'>
</view>
复制代码
let app = getApp();
Page({
data: {
statusBarHeight: app.globalData.statusBarHeight,
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
custom: app.globalData.custom
}
})
复制代码
.bg {
width: 100%;
height: 50rpx;
background: teal;
}
.jiaonang {
width: 100%;
background: red;
}
复制代码
以下是微信小程序模拟器的不同的结果
-
iphoneX 的效果
-
iphone6 的效果
-
安卓Nexus5x 的效果
-
平板iPad Air 2 的效果
-
ipad Pro 12.9-inch 的效果
3、如何适配不同的机型??
不同机型的适配一直是前端的最严重的问题,小程序对适配问题提出了rpx的方案。 但是对于自定义导航栏,我们似乎用不到的自定义导航栏!
3、注意
客户端
6.7.2
版本开始,navigationStyle: custom
对<web-view>
组件无效。
后记
- 其实小程序是特别的适合,没有开发经验入门或者转行前端的同志~
- 学会断点调试,学会排除错误,才是正道啊~
- 我想学的细一点,路才走的广一点~