编程语言
首页 > 编程语言> > 使用taro自定义微信小程序导航栏

使用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