WeChatミニプログラムの下部ナビゲーション列の開発（コード付き）

この記事では主に、WeChat ミニ プログラムの下部にある ナビゲーション 列の開発 (コード付き) に関する関連情報を紹介します。WeChat ミニ プログラムの下部に美しいナビゲーション列を追加したいのですが、ありません。作り方がわかったので、Baidu がこの記事を見つけました。みんなで共有して、必要な友達が参照できます

WeChat アプレットの下部にあるナビゲーション列の開発

レンダリングを見てみましょうまず

ここでは、ページが 3 つあるため、ナビゲーション アイコンを 3 つ追加しました。WeChat ミニ プログラムは最大 5 つまで追加できます。

では、それらはどのように表示され、どのように色付けされているのでしょうか？ 2ステップで完了！

1. アイコンの準備

ウェブサイトに入り、好きなアイコンの上にマウスをスライドさせて、下のダウンロードボタンをクリックします

ポップアップボックスで異なる色のアイコンを2つ選択しますサイズは64pxです。pngを選択してダウンロードし、エイリアスを付けます

上記の名前付きアイコンをミニプログラムプロジェクトディレクトリに新しく作成した画像フォルダーに保存します。

準備は完了です

2. 設定ファイルを変更します

プロジェクトのルートディレクトリで設定ファイルapp.

jsonを見つけ、次の設定情報を追加します

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

対応する

属性について説明します情報

tabBar は下部のナビゲーション構成属性を参照します

color 選択されていない場合の下部ナビゲーション テキストの色

selectedColor 選択されている場合の下部ナビゲーション テキストの色

borderStyle 下部ナビゲーション境界線のサンプルの色 (存在する場合は注意してください)ここにスタイルが書かれていない場合は、ナビゲーション ボックスの上端にデフォルトの明るい灰色の線が表示されます)

list ナビゲーション構成

配列

selectedIconPath 選択されたときのアイコン パス

iconPath 選択されていないときのアイコン パス

pagePath ページのアクセス アドレス

text ナビゲーション アイコンの下のテキスト

読んでいただきありがとうございます。お役に立てば幸いです。このサイトをサポートしていただきありがとうございます。

以上がWeChatミニプログラムの下部ナビゲーション列の開発（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。