原理
微信小程序现在提供了胶囊按钮的相关信息,现在可以精确计算导航栏高度和文字图标的对其了。
const { width, height, left, top, right } = wx.getMenuButtonBoundingClientRect()
其中,right
和left
都是以左侧为开始的距离。。如下图:
image.png
useNavInfo的hooks设计
设计如下图所示:
36E638E9-786A-4CD5-8893-5703D23B4362.png
使用
import useNavInfo from '../hooks/useNavInfo.tsx'
function somePage(){
const {appHeaderHeight} = useNavInfo()
}