这里写自定义目录标题
场景设置页面标题栏为自定义模式一些概念 - 重点解决方案详细代码util.js主页面自定义标题栏组件场景
常见场景为ui小姐姐为页面顶部设计了漂亮的图片例如我们的
好多小伙伴会设置隐藏系统的标题栏，但是自定义标题栏因为安卓和ios手机的兼容性问题，经常出现有的手机上标题和右侧按钮不能水平对齐的问题，接下来我用一种简单的方法来处理这兼容性问题
设置页面标题栏为自定义模式
进入目标页面的page.json 设置navigationStyle
{"navigationStyle": "custom",}
这一步很简单，网上一大堆教程，接下来上干货，先熟悉下几个概念
一些概念 - 重点
statusBarHeight：状态栏高度（小程序可获取），是指顶部显示手机信号，时间，电量的那一个小的状态条的高度。如图红色部分。titleBarHeight：标题栏高度（小程序获取不到），是从状态栏的底部开始的，到标题栏的底部的高度为止。如图绿色部分。 安卓48px ios44pxwx.getMenuButtonBoundingClientRect()：获取菜单按钮（右上角胶囊按钮）的布局位置信息。 主要由height、top接下来我们主要用胶囊按钮的高度和top来处理我们自定义标题栏的问题
解决方案
自定义标题栏，需要知道标题栏的高度和定位、页面主题的顶部的padding-top，计算方式如下
自定义标题：定位top：胶囊topheight: 胶囊height页面顶部空白高度页面paddingTop = 胶囊top + 胶囊height
详细代码
框架：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;},
主页面
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;
自定义标题栏组件
高级程序员要经常封装组件，方便复用，哈哈
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;
至此完美解决小程序自定义标题栏的兼容性问题，亲测很实用。
创作不易，有帮到小伙伴出坑请打赏几毛钱，蟹蟹
