微信小程序_自定义导航

一、为何须要自定义导航栏

何时开始支持

微信客户端7.0.0 - 新增 框架 支持页面级自定义导航配置 navigationStyle: custom。

基础版本库 v1.9.5 (2018.01.24)， 新增 配置 window.navigationStyle 支持全屏显示小程序 详情

目前支持全局的配置和单个页面的配置两种：

"navigationStyle": "custom"
复制代码

二、如何实现与官方同样效果导航条，以及如何扩展？

• 手机顶部信息栏的高度
• 微信小程序胶囊位置信息

微信小程序提供的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 的效果

三、如何适配不一样的机型？？

不一样机型的适配一直是前端的最严重的问题，小程序对适配问题提出了rpx的方案。 可是对于自定义导航栏，咱们彷佛用不到的自定义导航栏！

三、注意

客户端 6.7.2 版本开始，navigationStyle: custom 对 <web-view> 组件无效。

后记

1. 其实小程序是特别的适合，没有开发经验入门或者转行前端的同志~
2. 学会断点调试，学会排除错误，才是正道啊~
3. 我想学的细一点，路才走的广一点~