• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Taro3.x小程序导航栏高度等精确数据的hooks

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

hooks代码如下,useNavInfo.tsx

import React, {useState, useEffect} from 'react'
import Taro from '@tarojs/taro'

interface INavInfo {
  statusBarHeight: number
  titleBarHeight: number
  titelBarWidth: number
  appHeaderHeight: number
  marginSides: number
  capsuleWidth: number
  capsuleHeight:number
  capsuleLeft: number
  contentHeight: number
  screenHeight: number
  windowHeight: number
}

function useNavInfo(): INavInfo {
  const [navInfo, setNavInfo] = useState({
    statusBarHeight: 0,
    titleBarHeight: 0,
    titelBarWidth: 0,
    appHeaderHeight: 0,
    marginSides: 0,
    capsuleWidth: 0,
    capsuleHeight: 0,
    capsuleLeft: 0,
    contentHeight: 0,
    screenHeight: 0,
    windowHeight: 0,
  })

  useEffect(() => {
    console.log('sssss', Taro.getSystemInfoSync())
    const { statusBarHeight, screenWidth, screenHeight, windowHeight } = Taro.getSystemInfoSync()
    // 获取胶囊信息
    const { width, height, left, top, right } = Taro.getMenuButtonBoundingClientRect()
    // 计算标题栏高度
    const titleBarHeight = height + (top - statusBarHeight) * 2
    // 计算导航栏高度
    const appHeaderHeight = statusBarHeight + titleBarHeight
    //边距,两边的
    const marginSides = screenWidth - right
    //标题宽度
    const titelBarWidth = screenWidth - width - marginSides * 3
    //去掉导航栏,屏幕剩余的高度
    const contentHeight = screenHeight - appHeaderHeight

    setNavInfo({
      statusBarHeight: statusBarHeight, //状态栏高度
      titleBarHeight: titleBarHeight,  //标题栏高度
      titelBarWidth: titelBarWidth,  //标题栏宽度
      appHeaderHeight: appHeaderHeight, //整个导航栏高度
      marginSides: marginSides, //侧边距
      capsuleWidth: width, //胶囊宽度
      capsuleHeight: height, //胶囊高度
      capsuleLeft: left,
      contentHeight: contentHeight,
      screenHeight: screenHeight,
      windowHeight: windowHeight,
    })
  }, [])
  
  return navInfo
}


export default useNavInfo

使用:

import useNavInfo from '../hooks/useNavInfo.tsx'

function somePage(){
    const {appHeaderHeight} = useNavInfo()
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序之五星评分效果发布时间:2022-07-18
下一篇:
关于小程序的界面设计开发的探索 - 伍华聪发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap