WeChat アプレット tabBar の使用法を説明する例-ミニプログラム開発-php.cn

WeChat アプレット tabBar の使用法を説明する例

小云云

リリース： 2017-12-12 13:16:33

オリジナル

3410 人が閲覧しました

この記事は主にWeChatミニプログラムでのtabBarの使い方を紹介し、WeChatミニプログラムでのtabBarの機能、設定項目の使用法、操作上の注意点を例の形で詳しく分析します。

1. 効果の表示

2. 原則: app.json で tabBar 属性を設定する

{
 "pages": [
  "index",
  "picDisplay"
 ],
 "window": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "首页",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": false
 },
 "tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }
}

ログイン後にコピー

3キーコード

rree

4. 操作方法

新しいプロジェクトを作成し、app.jsonファイルを開き、キーコードを「window」:{}にコピーします。その後、中括弧の前のカンマに注意してください。以下に示すようにウィンドウ

Ar 5 つの一般的に使用される属性と 5 つのタイプの設定説明と Tabbar 属性値の設定説明

"tabBar": {
  "color":"#666666",
  "selectedColor":"#06bd04",
  "list": [{
   "pagePath": "index",
   "text": "首页",
   "iconPath": "images/index.png",
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

ログイン後にコピー

TABBAR:

1) COLOR: フォントの色が異なる場合

2) SelectCOLOR: フォントの色を選択します

3) borderStyle

: タブバーの上の線の色白 (白と黒のみをサポート)

4) backgroundColor

: タブバーの背景色

5) list

: rab リスト項目を設定します (最小 2、最大 5 タブ)。

さらに、listは配列属性であり、各項目はオブジェクトです:

① text