微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?

微信小程序获取自定义tabbar高度的解决办法

最新推荐文章于 2024-08-31 11:15:50 发布

瑆箫

最新推荐文章于 2024-08-31 11:15:50 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/mo3408/article/details/129951968

前端同时被 2 个专栏收录

309 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

微信开发和微信小程序

62 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

在微信小程序使用自定义tabbar时，获取tabbar高度遇到问题，常规方法返回null。本文提供了几种解决方案：1) 使用wx.getSystemInfoSync结合计算获取；2) 在page.json设置"custom": true，结合wx.createSelectorQuery获取；3) 通过app.js全局变量存储高度；4) 在组件js中用wx.createSelectorQuery获取。这些方法旨在帮助开发者正确获取自定义tabbar的高度。

在使用自定义tabbar时，你可能会需要获取tabbar的高度，但是按照网上的方法却得不到正确的结果，这让你十分头疼。那么该怎么办呢？小编为大家整理了以下几个方法，希望能够帮到大家。

1️⃣ 使用wx.getSystemInfoSync()方法获取系统信息，然后通过计算得出tabbar的高度。

示例代码如下：

const systemInfo = wx.getSystemInfoSync();
const height = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight - 44;
console.log('tabbar的高度为：', height);

2️⃣ 在page.json文件中设置"custom": true，然后在tabBar组件上绑定一个id，接着在页面的onLoad生命周期函数中使用wx.createSelectorQuery()方法获取tabBar组件的高度。

示例代码如下：

// page.json中设置
{
  "usingComponents": {
    "tab-bar": "/components/tab-bar/tab-bar"
  },
  "custom": true
}

// page.wxml中使用
<tab-bar id="myTabBar"></tab-bar>

// page.js中使用
onLoad: function () {