最近、小さなプログラム プロジェクトに取り組んでおり、カスタム ナビゲーション バーを使用する必要があります.以前は colorUI などのコンポーネント ライブラリのナビゲーション バー コンポーネントを使用していましたが、自分で作成したいので、小さなメモがあります。今日。
navigationBar を行う前に、navigationBar とは何かを理解しましょう。
WeChat アプレットには通常、ナビゲーション バーとタブバー (アプレットの下にある切り替えボタンの列) の 2 つのバーがあります. 以下のタブバーをカスタマイズする方法は一般的に比較的簡単です. ここでは、上のカスタム ナビゲーション バーの実現に焦点を当てます. . .
ナビゲーションバーをカスタマイズする理由
ネイティブ ナビゲーション バーの制限事項
- カプセル ボタンに加えて、ネイティブ ナビゲーション バーには、戻るボタンと、ユーザーが開いたミニ プログラムの最下位ページがホームページでない場合にデフォルトで表示される [ホームに戻る] ボタンのみが表示されます。
- ネイティブ ナビゲーション バーのタイトル テキストの色は白黒のみです。
- レイアウトの変更やカスタマイズはできません。
製品需要
ネイティブ ナビゲーション バーの制限がカスタム ナビゲーション バーを使用するのに十分でない場合、製品の需要が間違いなくより大きな原動力となります。
カスタム ナビゲーション バーでカプセル ボタンをカスタマイズできないことを除いて、他の領域はプログラマーの制御下にあるため、カスタム ナビゲーション バーを使用すると、製品のさまざまなニーズに確実に対応できます。
実際の開発プロセスでは、次の方法を使用します。
- wx.getSystemInfo() は、システム情報を取得するために使用されます (デバイス ブランド、デバイス モデル、画面サイズなど、具体的なパラメーターは記事の最後にあります)。
- wx.getMenuButtonBoundingClientRect() は、アプレットのカプセル情報を取得するために使用されます
カスタム NAVIGATIONBAR を理解したら、その方法を知る必要があります。
-
ネイティブ ナビゲーション バーを削除します。
- navigationBar ページをカスタマイズする必要がある page.json の navigationBarTitleText を削除します。
- "navigationStyle": "custom" を追加すると、元のナビゲーション バーが消え、カスタマイズが必要な [戻る] ボタンも表示されなくなります。
- さらに、2016 年には、WeChat は没入型ステータス バーに適応し始めており、現在、WeChat のほとんどすべてのモデルが没入型ステータス バーを備えています。プログラム可能な領域。
2. navigationBar の高さを計算します。
- もちろん、ネイティブ カプセル ボタンは存在するので、次のステップは、カスタム ナビゲーション バーの高さと位置を特定することです。
- 機種やシステムが違うとステータスバーやカプセルボタンの位置が定まらないので、どの機種でも冷静に判断できるようにある程度の計算は必要です。
- 「wx.getSystemInfo()」を使用して「statusBarHeight」を取得します。これは、画面の上部からナビゲーション バーまでの最も基本的な距離を決定します。
- 「wx.getMenuButtonBoundingClientRect()」を使用して、アプレットのカプセル情報を取得します (この API にはさまざまな問題があり、エンドごとにパフォーマンスが一貫していないことに注意してください。この API 呼び出しの失敗の処理については後述します) ）、下図のように画面上に以下の座標情報が表示されます左上隅が原点です。
3.次の図を例にとると、上の赤いボックスは statusBar で、高さはわかっています。下の赤いボックスはテキスト コンテンツで、中央のボックスはナビゲーションバーの高さです。黄色のボックスはオリジナルです。同じく垂直中央位置にあるカプセルボタンで、高さはカプセルボタンの左上隅の座標情報が分かっており、navigationBarHeight=青いボックスの高さ×2+カプセルボタンを取得することは難しくありません。身長。(青いボックスの高さ = カプセル button.top - statusBarHeight)
最終的な計算式は、navigationBarHeight = (カプセル ボタン.トップ - ステータスバー高さ) × 2 + カプセル ボタン.高さです。navigationBar と画面上部の間の距離は、navigationBarHeight です。
この計算方法は、さまざまなモデルと Android ios に適用できます。
"wx.getMenuButtonBoundingClientRect()" がエラーを取得するか、データが 0 である非常にまれなケースでは、シミュレートすることしかできません.Android の場合、一般的なナビゲーションバーの高さは 48px ですが、iOS の場合は通常 40px であり、カプセル ボタンの高さはすべてのモデルの 32px. これは、インターネット上の多くの記事や自己テストからも取得され、通常、このエラーは無視できます。もちろん、最も理想的なのは、WeChat がすべてのモデルを保持できることです。最後に、開発者ツールのバグは言うまでもなく、実際のデバイスのみが優先されることを思い出してください。
コード
- ローカル マシン情報を取得するには、通常、作成者はアプリの onLaunch に書き込みます。
app.js
//计算导航栏高度
const { statusBarHeight, platform } = wx.getSystemInfoSync()
const { top, height } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
//获取成功进行计算
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
//获取失败使用默认的高度
wx.setStorageSync(
'navigationBarHeight',
platform === 'android' ? 48 : 40
)
}- 作成者は、これらの高さ情報をストレージに保存し (グローバル変数に保存することもできます)、コンポーネントでこれらのデータを使用する navigationBar カスタム コンポーネントを作成します。
ナビゲーションバー.js
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') +
wx.getStorageSync('navigationBarHeight') +
'px',
//标题
title: '积分游戏'ナビゲーションバー.wxml
<view class="navigation-container" style="{
{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{
{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{
{'height:' + navigationBarHeight}}">
<!-- 这里就是导航栏 你可以将你想要的样式放到这里-->
<view class="navigation-buttons" style="{
{'height:' + menuButtonHeight}}">
<image class="nav-img" src='/images/back.svg'/>
...其余自定义button
</view>
<view class="navigation-title" style="{
{'line-height:' + navigationBarHeight}}">{
{title}}</view>
</view>
</view>
<!--空白占位fixed空出的位置-->
<view style="{
{'height: ' + navigationBarAndStatusBarHeight}}; background: #ffffff"></view>ナビゲーションバー.wxss
/* navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
left: 0;
background-color: #ffffff;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 20rpx;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-radius: 30rpx;
background-color: transparent;
}
.nav-img{
height: 32rpx;
width: 32rpx;
}
.navigation-title {
position: absolute;
left: 208rpx;
right: 208rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
要約する
- カスタム ナビゲーション バーの核心は、ナビゲーション バーの高さの配置です。これにより、カスタムの戻るボタンやその他のボタンの位置を正確に配置できます。これは、ネイティブ カプセルと一致しています。wxml のさまざまなレイアウト方法については、上記は筆者の記述方法のリストにすぎません。
- 小さなプログラムを学び、ナビゲーションバーをカスタマイズすることは非常に重要なスキルであり、そのロジックは複雑ではありません.フロントエンドを学ぶことと同じです.細かい作業をうまく行うには、非常に慎重で忍耐が必要です.
wx.getSystemInfo() によって取得されるパラメータ
