uniapp アプレットのカスタム トップ ナビゲーション バーの高さの調整

目次

カスタム ナビゲーション バーの概要:

カスタムナビゲーションバーの使用

ステップ 1: デフォルトのネイティブ ナビゲーション バーをキャンセルする

ステップ 2: プレースホルダー要素をページに追加する

---

カスタム ナビゲーション バーの概要:

        通常、画像などの塗りつぶしやその他の特別なニーズに使用されます。トップバーを単色で塗りつぶす場合は、navigationBarBackgroundColor を直接使用して完成させることができます。

page.json ファイル:

"navigationBarBackgroundColor": "#FED000"

効果：

カスタムナビゲーションバーの使用

ステップ 1: デフォルトのネイティブ ナビゲーション バーをキャンセルする

page.json ファイル ページのスタイルにコードを追加します。

"navigationStyle":"custom"

ステップ 2: プレースホルダー要素をページに追加する

フットプリントには次のものが含まれます。

        <!-- 状态栏高度 -->
        <view :style="{ height: `${statusBarHeight}px` }"></view>
        <!-- 自定义导航栏高度 并 居中 -->
        <view :style="{
          height: `${barHeight}px`,
          'line-height': `${barHeight}px`,
          'text-align': 'center',
        }">
            <text>评价</text>
        </view>

onLoad() {
    // 状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
    // 胶囊数据
    const { top, height } = wx.getMenuButtonBoundingClientRect();
    // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
    this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
},