序文
-
最近、uni-app を使用して H5 モバイル端末を作成する場合、pages.json ファイルでナビゲーション バーのアイコンを設定すると、それが有効にならないことが判明しました
-
ずっと公式サイトに行って確認してみたところ、ローカル画像はサポートしていないものの、iconfont.ttf（アイコンフォントのローカルダウンロード）形式の画像はサポートしているということです。
-
これは、ナビゲーション バーのアイコンを iconfont アイコン ライブラリで見つけてダウンロードし、ローカル フォームのプロジェクト リソース フォルダーに配置する必要があることを意味します。
titleNView 構成
実装プロセス
1. iconfont アイコン ライブラリ Web サイトにログインして、アイコン ダウンロード - iconfont-Alibaba ベクター アイコン ライブラリを見つけます。
2.ダウンロードして解凍したファイルを静的ファイルの下に置きます - 内部のファイル構造は次のようになります
3. Pages.json ファイルの下のナビゲーション バーにテキスト アイコンを設定します。
4. ダウンロード ファイル構造の下にあるindex.htmlをクリックして、ブラウザでダウンロード アイコンの形式を表示します。
5. 最後に、フォローアップ操作を続行するためにページ上で右ボタンがクリックされたかどうかを監視できます。このナビゲーション バーのあるページにアクセスしてください。
data平级位置
onNavigationBarButtonTap(e) {
console.log("点击了自定义按钮"，e);
},6. レンダリング
要約:
このプロセスを経て、アプリプラスカスタム ナビゲーション バー (titleNView) の右側にあるカスタム アイコン + テキスト ボタンを使用する uniapp についての予備的な印象も得たと思いますが、実際の開発では、遭遇する状況は異なるはずです。 . 同じですので、その原理を理解しなければなりませんし、それは変わりません。さあ、労働者を殴ってください！
不備があればご指摘ください、ありがとうございます -- Fengguowuhen