如何高效实现小程序自定义顶部和底部导航栏？

Question

小程序 自定义顶部、底部导航栏以及获取胶囊体位置信息

有什么高效的解决方案吗

Answer 1

自定义顶部

如果只是单独页面开启，只需要在该页面的 .json 文件中 "navigationStyle": "custom" 即可

{
  "navigationStyle": "custom"
}

如果是在全局每个页面开启，在 app.json 中配置即可

{
  "navigationStyle": "custom"
}

配置后，当在 wxml 中写布局时，它会的高度会占到 状态栏。

自定义标题栏

标题栏的位置是和胶囊在同一个位置，这时我们就需要获取胶囊的位置，然后动态的给我们自定义的标题栏传入 距离状态栏的高度，就可以自定义标题栏了，它的前提是 配置了 "navigationStyle": "custom"

获取胶囊位置

获取到胶囊位置后，我将它挂载到全局，这样在有的页面需要使用时，可以直接获取到高度

• <font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">wx</font><font style="color:rgb(168, 160, 149);">.</font><font style="color:rgb(133, 167, 192);">getMenuButtonBoundingClientRect</font><font style="color:rgb(168, 160, 149);">().</font><font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">top 获取</font>胶囊体距离顶部距离
• <font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">wx</font><font style="color:rgb(168, 160, 149);">.</font><font style="color:rgb(133, 167, 192);">getMenuButtonBoundingClientRect</font><font style="color:rgb(168, 160, 149);">().</font><font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">height</font><font style="color:rgb(168, 160, 149);">; 获取</font>胶囊体的高度
• <font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">wx</font><font style="color:rgb(168, 160, 149);">.</font><font style="color:rgb(133, 167, 192);">getMenuButtonBoundingClientRect</font><font style="color:rgb(168, 160, 149);">().</font><font style="color:rgb(196, 191, 184);background-color:rgb(23, 25, 26);">width</font><font style="color:rgb(168, 160, 149);">; 获取胶囊体的宽度</font>

<font style="color:rgb(168, 160, 149);"></font>

//胶囊体距离顶部距离
this.globalData.capsuleTop =  wx.getMenuButtonBoundingClientRect().top;
//胶囊体的高度
this.globalData.capsuleHeight =  wx.getMenuButtonBoundingClientRect().height;
//胶囊体的宽度
this.globalData.capsuleWidth =  wx.getMenuButtonBoundingClientRect().width;

// app.js
App({
onLaunch: function () {
this.globalData = {};
// 获取系统状态栏信息
wx.getSystemInfo({
success: e => {
    //胶囊体距离顶部距离
    this.globalData.capsuleTop =  wx.getMenuButtonBoundingClientRect().top;
    //胶囊体的高度
    this.globalData.capsuleHeight =  wx.getMenuButtonBoundingClientRect().height;
    //胶囊体的宽度
    this.globalData.capsuleWidth =  wx.getMenuButtonBoundingClientRect().width;
    //获取整个页面的高度
    this.globalData.screenHeight = e.screenHeight;
    }
 },
)}
})

<view class="head-container" style="height: {{customBar}}px;" selectable="" space="false" decode="false">
  <view class="head" style="top:{{capsuleHeight}}px;height:{{jnHeight}}px;line-height:{{jnHeight}}px;">
    <van-icon name="arrow-left" class="icon" />
  </view>
</view>

data: {
    screenHeight: app.globalData.screenHeight,
    customBar: app.globalData.capsuleTop + app.globalData.capsuleHeight,
    capsuleHeight: app.globalData.capsuleTop, //胶囊体距离顶部距离
    jnHeight:app.globalData.capsuleHeight,  //胶囊体的高度
},

自定义底部导航栏

记一个公式 就可以了： 底部栏高度 = <font style="color:#2F4BDA;"> </font><font style="color:#2F4BDA;background-color:rgb(43, 20, 26);">内容区域</font><font style="color:#2F4BDA;background-color:rgb(24, 26, 27);"> = </font><font style="color:#2F4BDA;background-color:rgb(43, 20, 26);">页面总高度</font><font style="color:#2F4BDA;background-color:rgb(24, 26, 27);"> - </font><font style="color:#2F4BDA;background-color:rgb(43, 20, 26);">顶部导航栏高度</font><font style="color:#2F4BDA;background-color:rgb(24, 26, 27);"> - </font><font style="color:#2F4BDA;background-color:rgb(43, 20, 26);">底部导航栏高度</font>

<view class="head-container" style="height:{{headContainerHeight}}px;background:orange;">
  顶部导航栏
</view>

<view class="body-container" style="height:{{screenHeight - headContainerHeight -  bottomContainerHeight}}px">
  内容区域
</view>


<view class="bottom-container" style="height:{{bottomContainerHeight}}px;background:red;">
  底部导航栏
</view>