フロントエンド Vue は、ナビゲーション バー コンポーネントの高さをカスタマイズし、戻る矢印を使用してタブバー アイコンをカスタマイズします。完全なコードをダウンロードするには、uni-app プラグイン マーケット アドレスにアクセスしてください: https://ext.dcloud.net .cn/plugin?id=12986
レンダリングは次のとおりです。
#
＃＃＃＃ 手順
「」「使い方」
// page.json はベクター アイコンを使用して戻る矢印を設定します
、{
"パス" : "ページ/ホーム/ホーム",
"スタイル" ：
{
"navigationBarTitleText": "ホーム",
"enablePullDownRefresh": false、
"アプリプラス": {
"titleNView": {
「ボタン」: [{
"float": "左"、
"fontSize": "22px",
"fontSrc": "/static/iconfont.ttf", // フォント ファイル
"text": "" // フォント アイコンは \u で始まり、フォント アイコンの後に 4 桁の数字が続きます。
}
】
}
}
}
}
// カスタム ナビゲーション バーの高さ
エージェントユーザーエージェント() {
var エージェント = navigator.userAgent;
if (/iphone|ipad|ipod/i.test(agent)) {
if (document.querySelector('.titleIos'))
document.querySelector('.titleIos').style.display = 'ブロック';
document.querySelector('.uni-page-head').style.paddingTop = '44px';
document.querySelector('.uni-page-head').style.height = '88px';
}
}、
「」
#### HTML コードセクション
```html
<テンプレート>
<ビュー>
<ビュークラス="コンテンツ">
<!-- iOS ナビゲーション バーの高さに適応する -->
<view class="titleIos"></view>
表紙
<button style="margin-top: 20px;" @click="goBackIndex">インデックス ページに戻る</button>
</ビュー>
</ビュー>
</テンプレート>
「」
#### JS コード (データを埋めるコンポーネントの導入)
```JavaScript
<スクリプト>
デフォルトのエクスポート {
データ（） {
戻る {
}
}、
onReady() {
// カスタム ナビゲーション バーの高さ
this.agentUserAgent();
}、
メソッド: {
// カスタム ナビゲーション バーの高さ
エージェントユーザーエージェント() {
var エージェント = navigator.userAgent;
if (/iphone|ipad|ipod/i.test(agent)) {
if (document.querySelector('.titleIos'))
document.querySelector('.titleIos').style.display = 'ブロック';
document.querySelector('.uni-page-head').style.paddingTop = '44px';
document.querySelector('.uni-page-head').style.height = '88px';
}
}、
// メニュークリックで戻る
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.redirectTo({
URL: '/pages/index/index'
})
}
}、
goBackIndex() {
uni.redirectTo({
URL: '/pages/index/index'
})
}
}
}
</script>
「」
#### CSS
```CSS
<スタイル>
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
コンテンツの位置揃え: 中央;
高さ: 100vh;
背景: 黄緑色;
フォントサイズ: 26px;
}
</スタイル>
「」