my.switchTab

2021-07-21 11:23

Introduction

Jump to the specified tabBar page, and then close all other pages that are not tabBar.

If the Mini Program has multiple tabs, you can use tabBar to configure the behavior of the specified tab, and the page to display during the tab switchover (You can switch tabs at the bottom of the client window).

Note: You can jump to the page via page jumping (my.navigateTo) or page redirecting (my.redirectTo) . Even the page is defined in the tabBar configuration, the bottom tab bar is not displayed. In addition, the first page of the tabBar must be the homepage.

Sample Code

copy

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "Home"
    },{
      "pagePath": "page/user/index",
      "name": "User"
    }]
  }
}

copy

my.switchTab({
  url: 'page/home/index'
})

Parameters

Property	Type	Required	Description
url	String	Yes	Path of the jumping tabBar page (page to be defined in the tabBar field in the app.json). Note: The path cannot be followed by parameters.
success	Function	No	Callback function upon call success.
fail	Function	No	Callback function upon call failure.
complete	Function	No	Callback function upon call completion (to be executed upon either call success or failure).

tabBar Configuration

Property	Type	Required	Description
textColor	HexColor	No	Text color.
selectedColor	HexColor	No	Color of highlighted text.
backgroundColor	HexColor	No	Background color.
items	Array	Yes	Configured for each tab.

Configured for each item:

Property	Type	Required	Description
pagePath	String	Yes	Set page path.
name	String	Yes	Name.
icon	String	No	Normal icon path.
activeIcon	String	No	Highlighted icon path.

The recommended icon size is 60*60px. The system performs unequal stretching and scaling for any incoming picture.

Example

copy

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