my.switchTab

2021-02-26 08:06

Introduction

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

If the Mini Program is an application of multiple tabs (tabs can be switched at the bottom of the client window), it is possible to use tabBar to configure the behavior of the specified tab, and the page to display during the tab switchover.

Note: on the page to which it jumps through the page jumping (my.navigateTo) or page redirecting (my.redirectTo, even if 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 home page.

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

Parameter	Type	Mandatory	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

Attribute	Type	Mandatory	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:

Attribute	Type	Mandatory	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"
      }
    ]
  }
}