使用taro自定义微信小程序导航栏

1.在app.config.js中的window配置项的内容替换为："navigationStyle":"custom"

custom表示自定义导航栏，但会保留右上角胶囊按钮。

window: {
    // backgroundTextStyle: 'light',
    // navigationBarBackgroundColor: '#fff',
    // navigationBarTitleText: 'WeChat',
    // navigationBarTextStyle: 'black',
    navigationStyle: 'custom' 
},

2.写组件，我这里框架使用的是vue

<template>
    <view class="navBar">自定义NavBar</view>
</template>
<script>
export default {
  name: "NavBar"
};
</script>
<style>
.navBar {
  text-align: center;
  color: red;
}
</style>

3.插入组件

import NavBar from "../../components/nav/NavBar";

<template>
  <view class="index">
    <NavBar></NavBar>
  </view>
</template>

<script>
import NavBar from "../../components/nav/NavBar";
export default {
  name: "index",
  components: {
    NavBar
  },
  methods: {}
};
</script>

效果图：

4.还需了解的知识，

（1）通过Taro.getSystemInfo(res)可以得到当前系统信息

示例：

Taro.getSystemInfo({
  success: res => console.log(res)
})
.then(res => console.log(res))

所以自定义导航栏的总高度为： 可视区域高度screenHeight  - 窗口高度windowHeight - 状态栏高度statusBarHeight 

（通过此方式可以得出原系统导航栏的高度，本例的原creenHeight：568，windowHeight : 504 ,statusBarHeight :20,得到系统导航栏的高度为64px）

（2）Taro.getMenuButtonBoundingClientRect()
获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

（3）此处有个两个注意点：右上角胶囊按钮的top是24px,24px - 状态栏高度20px=4px,但是 （系统导航栏高度64px - 状态栏高度20px - 胶囊按钮的高32px）/ 2 = 6px,有2px的误差 （有说错的话欢迎指正）；

另一个注意点是taro里的px转换到微信小程序里会出现失真问题，解决办法：方法一.使用强制单位，大写的PX ；方法二.使用rem单位 ；方法三.只开发小程序可以使用rpx单位

---------------------

最终效果图

 

                

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签：taro,..,自定义,NavBar,微信,按钮,高度,res
来源： https://blog.csdn.net/weixin_56436531/article/details/115252627