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

野性酷女 2022-12-10 07:19 572阅读 0赞

## 自定义navigationBar怎么做？ ##

### 去掉原生导航栏。 ###

1.  将需要自定义navigationBar页面的page.json的**navigationBarTitleText**去掉。
2.  加上**"navigationStyle"："custom"**，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
3.  另外，早在2016年微信已经开始适配沉浸式状态栏，目前几乎所有的机型里微信都是沉浸式状态栏，也就是说去掉原生导航栏的同时，**整个屏幕已经成为可编程区域**。
4.  文档：[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html][https_developers.weixin.qq.com_miniprogram_dev_extended_weui_navigation.html]

### 计算navigationBarHeight。 ###

*  原生的胶囊按钮当然存在，那么下一步就需要你去定位出自定义的导航栏高度以及位置。
 *  对于不同的机型，对于不同的系统，状态栏以及胶囊按钮的位置都不确定，所以需要用到一定的计算，从而面对任何机型都可以从容判定。

1.  使用**wx.getSystemInfo()**获取到**statusBarHeight**，这样就确定了导航栏最基本的距离屏幕上方的据里。
2.  使用**wx.getMenuButtonBoundingClientRect()**获取到小程序的胶囊信息（注意这个api存在各种问题，在不同端表现不一致，后面会叙述这个api调用失败的处理情况），如下图，以下坐标信息以屏幕左上角为原点。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]  
![867a1fa0da90ee6c8aa9c4137ed82fd8.png][]

3.以下图为例，上面的红色框是**statusBar**，高度已知；下面的红色框是正文内容，夹在中间的就是求解之一**navigationBarHeight**；而黄色的是原生**胶囊按钮**也是在垂直居中位置，高度为胶囊按钮基于左上角的坐标信息已知，不难得出，**navigationBarHeight** = 蓝色框高度 × 2 + **胶囊按钮**.height。（蓝色框高度 = 胶囊按钮.top - **statusBarHeight**）

4.最后的计算公式为：**navigationBarHeight** = （胶囊按钮.top - **statusBarHeight**） × 2 + **胶囊按钮**.height。**navigationBar** 距屏幕上方的距离即为**navigationBarHeight**。

5.这种计算方法在各种机型以及安卓ios都适用。

6.针对"**wx.getMenuButtonBoundingClientRect()**"获取错误或者获取数据为0的极少数情况，只能够去模拟，对于android，一般**navigationBarHeight**为48px，而对于ios一般为40px，所有机型的**胶囊按钮**高度是32px笔者也是通过网上很多的文章和自测得出的，这种误差一般可以忽略。当然最理想的就是微信可以hold住所有机型，呵呵。最后提醒一下仅以真机为准，开发者工具的bug就更多不说了。

### 代码实现 ###

*  获取本机信息，一般写在App的onLaunch中。

App.js

// App.js
    ...
    onLaunch(){
        const { statusBarHeight, platform } = wx.getSystemInfoSync()
        const { top, height } = wx.getMenuButtonBoundingClientRect()
    
        // 状态栏高度
        wx.setStorageSync('statusBarHeight', statusBarHeight)
        // 胶囊按钮高度 一般是32 如果获取不到就使用32
        wx.setStorageSync('menuButtonHeight', height ? height : 32)
        
        // 判断胶囊按钮信息是否成功获取
        if (top && top !== 0 && height && height !== 0) {
            const navigationBarHeight = (top - statusBarHeight) * 2 + height
            // 导航栏高度
            wx.setStorageSync('navigationBarHeight', navigationBarHeight)
        } else {
            wx.setStorageSync(
              'navigationBarHeight',
              platform === 'android' ? 48 : 40
            )
        }
    }
    ...

*  笔者将这几个高度信息储存在stroage中，之后创建navigationBar自定义组件，在组件中将会运用到这些数据。

navigationBar.js

// navigationBar.js
    ...
    data: {
        // 状态栏高度
        statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
        // 导航栏高度
        navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
        // 胶囊按钮高度
        menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
        // 导航栏和状态栏高度
        navigationBarAndStatusBarHeight:
          wx.getStorageSync('statusBarHeight') +
          wx.getStorageSync('navigationBarHeight') +
          'px'
    }
    ...

*  navigationBar.wxml中的布局就不多赘述，一般来说，导航栏使用fixed定位，里面再通过行内垂直居中的方式定位自定义的返回按钮，还有居中导航标题，以及字数过多显示省略号等。

navigationBar.wxml

<view class="navigation-container" style="{
       {'height: ' + navigationBarAndStatusBarHeight}}">
        
        <view style="{
       {'height: ' + statusBarHeight}}"></view>
        
        <view class="navigation-bar" style="{
       {'height:' + navigationBarHeight}}">
            <view class="navigation-buttons" style="{
       {'height:' + menuButtonHeight}}">
                <image class="nav-img" src='/images/back.svg'/>
                ...其余自定义button
            </view> 
            <view class="navigation-title" style="{
       {'line-height:' + navigationBarHeight}}">{
       {title}}</view>
        </view>    
    </view>
    
    <view style="{
       {'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>

navigationBar.wxss

/* navigationBar.wxss */
    .navigation-container {
      position: fixed;
      width: 100%;
      z-index: 99;
      top: 0;
      left: 0;
      background-color: #ffffff;
    }
    .navigation-bar {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .navigation-buttons {
      display: flex;
      align-items: center;
      margin-left: 10px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      border-radius: 15px;
      background-color: transparent;
    }
    .nav-img{
      height: 16px;
      width: 16px;
    }
    .navigation-title {
      position: absolute;
      left: 104px;
      right: 104px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #000000;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

[https_developers.weixin.qq.com_miniprogram_dev_extended_weui_navigation.html]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221123/49a7f9710bcc41cb9444b54cca6d026e.png
[867a1fa0da90ee6c8aa9c4137ed82fd8.png]: /images/20221123/1cc2ffb68025444f981eba76af230355.png