WeChat アプレット開発タブ (ウィンドウ下部の TabBar) ページ切り替えの実装

この記事では主にWeChatアプレット開発におけるタブ(ウィンドウ下部のTabBar)ページ切り替えに関する関連知識を紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう

WeChat アプレットの開発中に、ウィンドウの下部にあるタブ バーでページを切り替えるのは非常に簡単で便利です。

コード:

1. app.json

//app.json 
{ 
 "pages":[ 
  "pages/index/index", 
  "pages/logs/logs" 
 ], 
 "window":{ 
  "backgroundTextStyle":"light", 
  "navigationBarBackgroundColor": "#999999", 
  "navigationBarTitleText": "tab", 
  "navigationBarTextStyle":"white" 
 }, 
  "tabBar": { 
  "color": "#ccc", 
  "selectedColor": "#35495e", 
  "borderStyle": "white", 
  "backgroundColor": "#f9f9f9", 
  "list": [ 
   { 
    "text": "首页", 
    "pagePath": "pages/index/index", 
    "iconPath": "images/home.png", 
    "selectedIconPath": "images/home-actived.png" 
   }, 
   { 
    "text": "目录", 
    "pagePath": "pages/catalogue/catalogue", 
    "iconPath": "images/note.png", 
    "selectedIconPath": "images/note-actived.png" 
   }, 
   { 
    "text": "我的", 
    "pagePath": "pages/mine/mine", 
    "iconPath": "images/profile.png", 
    "selectedIconPath": "images/profile-actived.png" 
   } 
  ] 
 } 
}

pagePath はページのパスです。 iconPath は画像のパスです。

selectedIconPath: アイコンのサイズは 40kb に制限されます。最大 5、最小 2 のバー。

ページディレクトリにページを書き込んで切り替えます。

以上がWeChat アプレット開発タブ (ウィンドウ下部の TabBar) ページ切り替えの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。