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