小程序导航栏透明，精准设置小程序自定义标题的高度和定位

场景

常见场景为ui小姐姐为页面顶部设计了漂亮的图片例如我们的

好多小伙伴会设置隐藏系统的标题栏，但是自定义标题栏因为安卓和ios手机的兼容性问题，经常出现有的手机上标题和右侧按钮不能水平对齐的问题，接下来我用一种简单的方法来处理这兼容性问题

设置页面标题栏为自定义模式

进入目标页面的page.json 设置navigationStyle

{
  "navigationStyle": "custom",
}
1
2
3

这一步很简单，网上一大堆教程，接下来上干货，先熟悉下几个概念

一些概念 - 重点

1. statusBarHeight：状态栏高度（小程序可获取），是指顶部显示手机信号，时间，电量的那一个小的状态条的高度。如图红色部分。
2. titleBarHeight：标题栏高度（小程序获取不到），是从状态栏的底部开始的，到标题栏的底部的高度为止。如图绿色部分。 安卓48px ios44px
3. wx.getMenuButtonBoundingClientRect()：获取菜单按钮（右上角胶囊按钮）的布局位置信息。 主要由height、top

接下来我们主要用胶囊按钮的高度和top来处理我们自定义标题栏的问题

解决方案

自定义标题栏，需要知道标题栏的高度和定位、页面主题的顶部的padding-top，计算方式如下

自定义标题：定位
  top：胶囊top
  height: 胶囊height

页面顶部空白高度
	页面paddingTop = 胶囊top +  胶囊height
1
2
3
4
5
6

详细代码

框架：taro
理解思路就好，用哪个小程序框架都一样，删除了无用的代码

util.js

export default {
  // 微信右上角胶囊按钮的参数
  jnbtn() {
    let jn = Taro.getMenuButtonBoundingClientRect();
    let obj = {
      width: jn.width,
      height: jn.height,
      top: jn.top,
      pageTop: jn.top + jn.height
    }
    return obj;
},
1
2
3
4
5
6
7
8
9
10
11
12

主页面

import { useCallback,useState } from "react";
import { View, Text, Button, Image } from "@tarojs/components";
import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import './commission.less'
import { AtIcon } from 'taro-ui'
import util from '../../util/util'
import MyTitle from '../../components/myTitle'
const Index = () => {
  let jnbtn = util.jnbtn();

  return (
    <View className="page commipage relative">
      // 自定义标题栏
      <MyTitle title='佣金' back={true}/>
      // 设置页面主题上边的paddingTop
      <View className="pagetop" style={{ paddingTop: `${jnbtn.pageTop}px` }}>
        <Image className='yingbi' src={`${util.oss}/coin.svg`} mode='widthFix'></Image>
      </View>
    </View>
  );
};

export default Index;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

自定义标题栏组件

高级程序员要经常封装组件，方便复用，哈哈

import { View } from "@tarojs/components";
import './index.less'
import { AtIcon } from 'taro-ui'
import util from '../../util/util'

const Index = (props) => {
  let jnbtn = util.jnbtn();
  const {title='', back='' }=props;

  return (
    // 重点
    <View className="mytitlew center-v" 
      style={{ top: `${jnbtn.top}px`, height: `${jnbtn.height}px` }}>
      {back && <View className="tback center-v"> <AtIcon value='chevron-left' size='20' color='#333'></AtIcon> </View>}
      {title && <View className="title center">{title}</View>}
    </View>
  );
};

export default Index;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

至此完美解决小程序自定义标题栏的兼容性问题，亲测很实用。
创作不易，有帮到小伙伴出坑请打赏几毛钱，蟹蟹