收藏
回答

小程序没有获取tabBar高度的API吗?

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 tabBar 客户端 6.7.3 2.4.0

- 页面是一个scroll-view,需要减去底部tabBar的高度,然后赋值给scroll-view,但是微信小程序不提供这个API


- 希望提供获取底部tabBar相关信息的API


回答关注问题邀请回答
收藏

4 个回答

  • 池鱼🐠
    池鱼🐠
    04-30

    首先这个tabbar的值机型不一样,高度也是不一样的,动态获取的方法如下:

    调用微信提供的方法 wx.getSystemInfo() 详细信息请查看 => 微信官方API

    返回的设备信息json如下:

    {
    	"errMsg": "getSystemInfo:ok",
    	"model": "iPhone 6/7/8",
    	"pixelRatio": 2,
    	"windowWidth": 375,
    	"windowHeight": 619,
    	"system": "iOS 10.0.1",
    	"language": "zh_CN",
    	"version": "7.0.4",
    	"screenWidth": 375,
    	"screenHeight": 667,
    	"SDKVersion": "2.10.3",
    	"brand": "devtools",
    	"fontSizeSetting": 16,
    	"benchmarkLevel": 1,
    	"batteryLevel": 97,
    	"statusBarHeight": 20,
    	"safeArea": {
    		"right": 375,
    		"bottom": 667,
    		"left": 0,
    		"top": 20,
    		"width": 375,
    		"height": 647
    	},
    	"deviceOrientation": "portrait",
    	"platform": "devtools",
    	"devicePixelRatio": 2
    }
    

    这里我们需要用的到参数有四个

    windowHeight :窗口高度
    screenHeight :屏幕高度 
    statusBarHeight :设备状态栏高度 
    pixelRatio :设备像素比
    

    底部的导航栏计算公式:

    const tabbarHeight = ( screenHeight - windowHeight - statusBarHeight ) * pixelRatio
    

    测试机型结果: 

    iPhone 5:          56px
    iphone 6/7/8 :    56px
    iPhone 6/7/8 Plus: 84px
    iPhone X:          114px
     ...
    更多机型,请自测,记得回来点个赞!
    

    备注:建议在app.js中调用,然后全局设置即可

    04-30
    有用 2
    回复 7
    查看更多(2)
  • 。
    2018-11-15

    可以通过wx.getSystemInfo()方法获取到 screenHeight 和 windowHeight

    screenHeight - windowHeight就是 tabbar 的高度,我就是这么搞的...楼主试试

    2018-11-15
    有用 1
    回复 2
    • Flouxetin
      Flouxetin
      2018-11-15

      真的吗,哈哈,谢谢了,我回去试试!

      2018-11-15
      回复
    • 李健杰
      李健杰
      2019-06-17

      显然不对,减出来的是顶部导航栏的高度;

      2019-06-17
      2
      回复
  • spiritelf(黄钦
    spiritelf(黄钦
    07-24

    如果是自定义的tabbar呢 该如何获取

    07-24
    有用
    回复
  • 鲤子
    鲤子
    2018-11-11

    flex-grow

    2018-11-11
    有用
    回复 10
    • Flouxetin
      Flouxetin
      2018-11-11

      意思是让sroll-view的flex-grow:1,占满剩余空间吗?

      2018-11-11
      回复
    • 鲤子
      鲤子
      2018-11-11回复Flouxetin

      嗯哼,话说你height: 100%;或者height: 100vh;不就是满屏了嘛。。。

      2018-11-11
      回复
    • Flouxetin
      Flouxetin
      2018-11-11回复鲤子

      如图。。。


      2018-11-11
      回复
    • 鲤子
      鲤子
      2018-11-11回复Flouxetin

      你这个tabBar是自己写的还是默认的,宁外你在控制台看看wxml的样式,用flex布局就好了。

      2018-11-11
      1
      回复
    • Flouxetin
      Flouxetin
      2018-11-11回复鲤子

      tabBar是小程序自带的,我试试flex布局,谢谢!

      2018-11-11
      回复
    查看更多(5)
登录 后发表内容