• 下载
  • 社区

my.switchTab

跳转到指定标签页(tabbar)页面,并关闭其他所有非标签页页面。


如果小程序是一个多标签(tab)应用,即客户端窗口的底部栏可以切换页面,那么可以通过标签页配置项指定标签栏的表现形式,以及标签切换时显示的对应页面。


通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使是定义在标签页配置中的页面,也不会显示底部的标签栏。标签页的第一个页面必须是首页。


相关问题请参见 路由FAQ


扫码体验

tabbar.jpeg


效果示例

导航栏5-5.png


示例代码

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "page/home/index",
      "name": "首页"
    },{
      "pagePath": "page/user/index",
      "name": "用户"
    }]
  }
}


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


入参

Object 类型,属性如下:

属性

类型

必填

说明

url

String

跳转的标签页的路径(需在 app.json 的 tabbar 字段定义的页面)。


注意:路径后不能带参数。

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。


tabBar 配置

属性类型必填描述
textColorHexColor文字颜色。
selectedColorHexColor选中文字颜色。
backgroundColorHexColor背景色。
itemsArray每个标签(tab)配置。

item 配置:

属性类型必填描述
pagePathString设置页面路径。
nameString名称。
iconString普通图标路径。

推荐大小为 60*60px ,系统会对任意传入的图片非等比拉伸或缩放。

activeIconString高亮图标路径。


示例配置

// tabBar 示例配置
{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}