ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat ミニ プログラムの下部ナビゲーション バーを設定する方法の紹介

WeChat ミニ プログラムの下部ナビゲーション バーを設定する方法の紹介

黄舟
リリース: 2017-09-13 11:07:47
オリジナル
7212 人が閲覧しました

この記事は主にWeChatミニプログラムの下部ナビゲーション列の設定方法を詳しく説明した関連情報を紹介しますので、必要な友達は参考にしてください

の下部ナビゲーション列の設定方法を詳しく説明します。 WeChat ミニ プログラム

ミニ プログラムの下部のナビゲーション列を美しくしたい場合は、ナビゲーション列の作り方がわからなかったので、Baidu がこの記事を見つけて、みんなに共有しました。

ミニ プログラムのヘッダー タイトルが設定されました。下部のナビゲーション バーを実装する方法について話しましょう。

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

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

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

1. アイコンの準備

Alibabaアイコンライブラリ

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

、ポップアップで2つの異なる色を選択しますアイコンのサイズを 64px に設定し、それをダウンロードして、ミニ プログラムのプロジェクト ディレクトリに作成したイメージ フォルダーに別名を付けて保存します。

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": "开心测试" 
  }] 
 },
ログイン後にコピー

対応する属性情報を説明します


りー

以上がWeChat ミニ プログラムの下部ナビゲーション バーを設定する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート