Mobile Platform as a Service:tabBar

tabBar の使用方法

複数ページを持つミニプログラムでは、tabBar と対応するページを設定できます。 tabBar は、ページ間を切り替えるために使用されます。

tabBar の構成

item の構成

サンプルコード

以下は、tabBar のサンプルコードです。

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "Homepage"      },
      {
        "pagePath": "pages/logs/logs",
        "name": "Logs"      }
    ]
  }
}

my.hideTabBar

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar を非表示にできます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.hideTabBar のサンプルコードです。

my.hideTabBar({
    animation: true
})

パラメーター

入力パラメーターはオブジェクトタイプで、次の属性があります。

my.hideTabBarRedDot

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar 内のタブアイコンの右上隅にある赤い点を非表示にできます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.hideTabBarRedDot のサンプルコードです。

my.hideTabBarRedDot({
  index: 0
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.removeTabBarBadge

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、タブアイコンの右上隅からテキストを削除できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.removeTabBarBadge のサンプルコードです。

my.removeTabBarBadge({
  index: 0
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.setTabBarBadge

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。

このインターフェースを使用すると、タブアイコンの右上隅にバッジを追加できます。赤い点のリマインダーを使用して、メッセージの数を設定できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.setTabBarBadge のサンプルコードです。

my.setTabBarBadge({
  index: 0,
  text: '42'
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.setTabBarItem

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar 内のタブアイコンのテキストを動的に設定できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.setTabBarItem のサンプルコードです。

my.setTabBarItem({
    index: 0,
    text: 'text',
    iconPath: '/image/iconPath',
    selectedIconPath: '/image/selectedIconPath'
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.setTabBarStyle

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、フォントの色、タブアイコンの背景色と罫線の色など、tabBar の全体的なスタイルを動的に設定できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.setTabBarStyle のサンプルコードです。

my.setTabBarStyle({
    color: '#FF0000',
    selectedColor: '#00FF00',
    backgroundColor: '#0000FF',
    borderStyle: 'white'
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.showTabBar

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar を表示できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.showTabBar のサンプルコードです。

my.showTabBar({
    animation: true
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

my.showTabBarRedDot

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar 内のタブアイコンの右上隅にある赤い点を表示できます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、my.showTabBarRedDot のサンプルコードです。

my.showTabBarRedDot({
  index: 0
})

パラメーター

パラメーターはオブジェクトタイプで、次のプロパティがあります。

onTabItemTap

バージョン要件: ベースライブラリ V1.11.0 以降のバージョン。以前のバージョンでは、最初に非互換性を処理する必要があります。詳細については、「互換性処理」をご参照ください。

このインターフェースを使用すると、tabBar のタップイベントをリッスンできます。問題が発生した場合は、FAQ をご覧ください。

サンプルコード

以下は、onTabItemTap のサンプルコードです。

//.js
Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})

FAQ

サポートされている機能に関する質問

• Q: 入力パラメーターを使用して、tabBar で定義されているページをリダイレクトできますか？

  A: はい。

• Q: tabBar のタップイベントをリッスンするにはどうすればよいですか？

  A: ミニプログラムで onTabItemTap を呼び出して、tabBar のタップイベントをリッスンできます。

• Q: SVG 形式の画像を tabBar のタブアイコンとして使用できますか？

  A: いいえ。SVG 形式の画像は使用できません。PNG、JPEG、JPG、または GIF 形式のみを使用できます。

• Q: タブのスタイルを設定するにはどうすればよいですか？

  A: 次のコードスニペットに示すように、JSON ファイルでスタイルを設定できます。または、my.setTabBarStyle を実行してスタイルを設定します。

    "tabBar": {
        "textColor": "#404040",
        "selectedColor": "#108ee9",
        "backgroundColor": "#F5F5F9"
      }

リクエスト例外に関する質問

• Q: tabBar 内のページに切り替えようとしたときに、「未定義のプロパティ 'getCurrentPages' を読み取ることができません」というエラーメッセージが表示された場合はどうすればよいですか？

  A: このエラーは、指定された tabBar の URL が間違っているために発生します。tabBar の URL を確認してください。

• Q: ページにリダイレクトした後、tabBar が表示されなくなるのはなぜですか？

  A: my.navigateTo または my.redirectTo が実行された後にページが表示された場合、tabBar はページの下部に表示されません。また、tabBar のデフォルトページは、ミニプログラムのホームページである必要があります。

• Q: 入力パラメーターを使用して tabBar 内のページをリダイレクトできますか？

  A: tabBar は、入力パラメーターを使用したタブのリダイレクトをサポートしていません。入力パラメーターを使用してリダイレクトするには、キャッシュまたはグローバル変数を使用することをお勧めします。

• Q: tabBar のページに移動した後、上位レベルのページの URL を取得するにはどうすればよいですか？

  A: ページに移動した後、現在のページの URL はグローバルに保存されます。tabBar 内のタブを切り替えるときに、URL プロパティを使用して上位レベルのページのグローバル URL を取得できます。

• Q: IDE でのコミッショニング中に、tabBar 内のタブを切り替えるときにライフサイクル関数 onshow と onload が実行されないのはなぜですか？

  A: tabBar でのページ切り替えをテストするには、物理デバイスを使用する必要があります。IDE でコミッショニングを実行した場合、ライフサイクル関数はトリガーされません。