WeChat ミニプログラムでの tabBar の使用について (詳細なチュートリアル)-jsチュートリアル-php.cn

WeChat ミニプログラムでの tabBar の使用について (詳細なチュートリアル)

亚连

リリース： 2018-06-22 17:30:49

オリジナル

2366 人が閲覧しました

この記事では、主に WeChat ミニプログラムでの tabBar の使用法を紹介し、WeChat ミニプログラムでの tabBar の機能、構成項目の使用法、および操作上の注意事項を例とともに詳細に分析します。また、読者がダウンロードできる完全なデモソースコードも付属しています。必要な友達は参考にしてください

この記事では、WeChat アプレットでの tabBar の使用法を例とともに説明します。参考までに皆さんにも共有してください。詳細は以下の通りです:

原則: 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. キーコード

"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"
  }]
 }

ログイン後にコピー

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

tabBar 属性値

"tabBar": {
  //设置tabBar文字默认颜色
  "color":"#666666",
  //设置tabBar文字被选中是的颜色
  "selectedColor":"#06bd04",
  //tab列表，数组类型，改数组内至少要有两个但不大于5个的tab对象
  "list": [{
   //设置tab跳转页面链接
   "pagePath": "index",
   //设置tab上的文字
   "text": "首页",
   //设置tab上的默认图标
   "iconPath": "images/index.png",
   //设置tab被选中时的图标
   "selectedIconPath": "images/indexHL.png"
  },{
   "pagePath": "picDisplay",
   "text": "图片展示",
   "iconPath": "images/picDisplay.png",
   "selectedIconPath": "images/picDisplayHL.png"
  }]
 }

ログイン後にコピー

tabBar 5 つの一般的な属性と構成手順:

1) color: フォントの色が選択されていません

2) selectedColor: 選択されたフォントの色

3) borderStyle: の色タブバーの上の線は白 (白のみがサポートされます) と黒です)

4) backgroundColor:タブの背景色

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

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

① text: タブ上のテキストを設定します

② iconPath: タブを設定します。 be in the open 起動時に表示される画像パス。

③ selectedIconPath: タブがアクティブになったときの画像パスを設定します (iconPathとselectedIconPathの画像サイズ制限は両方とも40KB)

④ pagePath: タブがタッチされたときのジャンプページのパスを設定します(このページページ内で設定する必要があります)