乐趣区

关于小程序:微信小程序自定义导航栏与胶囊对齐方案

jiezi

计划简述

在网上看过一些其他人的计划，和我构想的向胶囊看齐思路（这个不应该是最简略清晰的计划么？）都不一样，所以就本人整了一个计划了。

要实现自定义导航栏与胶囊对齐，如下图如示，只须要获取导航栏高度，及导航栏距上的地位（其实就是状态栏高度），再通过 css 布局就实现工作了。这个计划应该是最简略易懂的计划了。
如果有更简单的布局须要，都以导航容器为基准去扩大就行了。

获取距上和高度

距上

获取距上，也即状态栏高度，调用 wx.getSystemInfoSync api 能够拿到：

// 获取距上
const barTop = wx.getSystemInfoSync().statusBarHeight

getSystemInfoSync 参考（留神：小程序根底库版本不低于 1.9.6）：https://developers.weixin.qq….

导航栏高度

从下面的图里咱们能够看到导航栏高度是由胶囊高度 + 胶囊上下边距。
胶囊上下边距是一样大的，通过胶囊 top- 状态栏高度就能够失去上边距。
胶囊信息通过 wx.getMenuButtonBoundingClientRect api 能够拿到。

// 获取胶囊按钮地位信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
// 获取导航栏高度
const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2

getMenuButtonBoundingClientRect 参考（留神: 小程序根底库版本不低于 2.15.0）：https://developers.weixin.qq….

占位容器高度

一般来说自定义导航栏是要固定在页面最下面的，所以得有个占位元素来占距地位，不然页面最下面失常内容就会被导航栏遮住。所以导航栏里面应该再加个占位容器，高度 = 导航栏高度 + 距上。

const placeholderHeight = barHeight + barTop

代码汇总

js 局部:

// 如果须要多个页面都引入自定义组件，那建一个 Behavior 放外面
Page({
  data: {
    // bar（title 这一条）距
    barTop: 0,
    // bar 高度，bar 是 fixed
    barHeight: 0,
    // 占位高度，不是 fixed，这个高度理论就是 barTop + barHeight
    placeHolderHeight: 0
  },
  onLaunch () {
    // 获取距上
    const barTop = wx.getSystemInfoSync().statusBarHeight
    // 获取胶囊按钮地位信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    // 获取导航栏高度
    const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
    this.setData({
      barHeight,
      barTop,
      placeHolderHeight: barHeight + barTop
    })
  }
})

wxml 局部。 要留神的是 占位容器是失常元素顶不到屏幕最下面，所以给它加红色背景色是遮不住状态栏的 ，得在 header 上加，因为 header 是 fixed 元素能够顶到屏幕最下面，而后 top 用在 padding 上。Perfect!

<view style="height: {{placeHolderHeight}}px;">
  <view class="header" style="height: {{barHeight}}px; padding-top: {{barTop}}px">
    <text> 这是题目 </text>
  </view>
</view>

wxss 局部 

.header {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

其余

设置小程序根底版本库

getMenuButtonBoundingClientRect 须要小程序根底库版本不低于 2.15.0，登录微信小程序管理后盾，在最上面的 设置 - 根本设置 - 性能设置 - 根底库最低版本设置 里能够设置。

自定义导航栏配置

要自定义导航栏，须要在页面的 json 文件里减少配置：

// xxx.json
{"navigationStyle": "custom"}

https://developers.weixin.qq….

退出移动版