微信小程序底部tabber配置

在微信小程序的开发当中会遇到底部多tab栏切换的需求,这时候就需要使用微信小程序的tabber,通过配置tabber即可实现底部多tab栏跳转切换的功能。

小程序tabber

1、在小程序app.json中加入tabBer

"tabBar": {

    "color": "#9e9e9e",

    "selectedColor": "#d03a29",

    "borderStyle": "black",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "首页",

        "iconPath": "images/icon1.png",

        "selectedIconPath": "images/icon1_on.png"

      },

      {

        "pagePath": "pages/hdbm/hdbm",

        "text": "活动报名",

        "iconPath": "images/icon2.png",

        "selectedIconPath": "images/icon2_on.png"

      },

      {

        "pagePath": "pages/team/team",

        "text": "加入团队",

        "iconPath": "images/icon3.png",

        "selectedIconPath": "images/icon3_on.png"

      }

    ]

  },

属性作用:

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航上边框的颜色

list   导航配置数组(最少2个、最多5个tab)

pagePath 页面访问地址

text  导航图标下方文字

iconPath 未选择时 图标路径

selectedIconPath 选中时 图标路径

小程序tabber

2、tabBer配置注意事项

tabBer中pagePath页面跳转地址需要在app.json页面中pages数组中进行定义,否则会导致页面无法跳转。

页面跳转到tabber中配置的某一个页面时需要使用wx.switchTab进行跳转。

wx.switchTab({

  url: 'page/index/index'

})

跳转到tabBer页面,并关闭其他所有非tabBer页

关键词:
返回列表

相关文章

相关案例