WeChatミニプログラム下部のナビゲーションバーの開発について-ミニプログラム開発-php.cn

WeChatミニプログラム下部のナビゲーションバーの開発について

不言

リリース： 2018-06-27 15:39:08

オリジナル

2891 人が閲覧しました

この記事では、WeChat アプレットの下部にあるナビゲーション列の開発に関する関連情報を主に紹介します。WeChat アプレットの下部に美しいナビゲーション列を作りたいのですが、作り方がわかりません。そこで、Baidu がこの記事を見つけて、みんなと共有しました。必要な場合は、お友達が参照してください

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

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

、ページが 3 つあるため、ナビゲーションアイコンを 3 つ追加しました。WeChat アプレットは最大 5 つまで追加できます。

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

1. アイコンの準備

Alibaba アイコンライブラリ http://www.iconfont.cn/collections/show/29

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

ポップアップボックスで異なる色の 2 つのアイコンを選択します。私は png を選択して、上の名前を付けて保存します。ミニプログラムのプロジェクトディレクトリに新しく作成したimagesフォルダーにアイコンを追加します

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 選択時のボトムナビゲーションテキストの色selected

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

list ナビゲーション構成の配列

selectedIconPath 選択時のアイコンのパス

iconPath 未選択時のアイコンパス

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

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

より詳細なスタイルを変更したい場合は、