序文
-
実際の開発では、このコンポーネントが実現できるかどうかではなく、要件、試作図、機能的なカラーマッチングに応じて開発を行います。
-
ホーム ページにジャンプする必要がない場合、タイトルが左に移動し、グラデーション カラー、入力ボックス、その他のレイアウトが表示されます。ネイティブ ナビゲーション バーはニーズを満たしていません。
-
このとき、ナビゲーション バーをカスタマイズする必要があります。uni-app は、携帯電話のシステム バーの高さとカプセル ボタンの高さを示す CSS 変数を提供します。ただし、これを書き込むと、ページのレイアウトが変わります。これは、携帯電話の解像度が異なるとスケーリングが異なるため、システム バーとカプセル ボタンに違いが生じるためです。
-
別の角度から考えてみると、なぜ WeChat 自体によってカプセル化されたコードがこれらの問題に適応できるのかというと、高さを生きたまま書き込むからです。初めてページに入るときのみ API を呼び出す必要があります。電話システムバー、カプセルボタンを入手すると、これらの問題を解決できます。
コード実装 - 直接コピー可能
<template>
<view class="content">
<!-- 背景导航栏 -->
<view class="background-plate" :style="{ height:titleheight + titletop + 10 + 'px'}">
</view>
<!-- 标题 -->
<view class="status_bar" :style="{ height:titleheight + 'px',top: titletop + 'px'}">
<text>自定义导航栏</text>
</view>
<!-- 内容 -->
<view class="content-statistics" :style="{ paddingTop:titleheight + titletop + 10 + 'px'}">
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 胶囊按钮高度
titleheight: 0,
// 胶囊到顶部距离
titletop: 0,
}
},
onLoad() {
// 或许胶囊按钮各种参数
this.getHeight()
},
methods: {
getHeight() {
let res = uni.getMenuButtonBoundingClientRect();
this.titletop = res.top;
this.titleheight = res.height
console.log(res);
console.log("titletop的值", this.titletop);
console.log("titleheight的值", this.titleheight);
console.log("一半的titleheight的值", this.titleheight / 2);
},
}
}
</script>
<style lang="scss">
.content {
.background-plate {
width: 100vw;
background: skyblue;
position: fixed;
left: 0;
z-index: 5;
}
.status_bar {
width: 100vw;
position: fixed;
left: 0;
line-height: 64rpx;
padding-left: 32rpx;
z-index: 10;
text {
font-size: 36rpx;
font-family: PingFang SC-Heavy, PingFang SC;
font-weight: 800;
color: #FFFFFF;
}
}
}
</style>要約:
このプロセスを経て、ユニアプリのカスタム ナビゲーション バー - 適応問題の解決について最初に深い印象を受けたと思いますが、実際の開発では遭遇する状況は明らかに異なるため、それを理解する必要があります。原理は常に同じ。さあ、労働者を殴ってください！
欠点があればご指摘ください、ありがとうございます - Feng Guo Wuhen