WeChat アプレットはカスタム タブバーを使用しており、タブバーの高さを取得しようとしていますが、返された結果は null です。取得方法は?

カスタムタブバーを使用する場合、タブバーの高さを取得する必要がある場合がありますが、オンラインの方法では正しい結果が得られず、非常に頭を悩ませます。それでは何をすべきでしょうか？エディターはあなたの役に立ちたいと考えて、次の方法をまとめました。

1️⃣ wx.getSystemInfoSync()メソッドを使用してシステム情報を取得し、タブバーの高さを計算します。

サンプルコードは次のとおりです。

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

2️⃣ page.json ファイルで "custom": true を設定し、ID を tabBar コンポーネントにバインドし、ページの 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 () {
  const query = wx.createSelectorQuery();
  query.s