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

2021-03-26 20:32:53 阅读：305 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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