微信小程序tab使用整理

一、微信小程序自带tab功能

目前在微信小程序中自带多tab功能，使用简单，主要在配置文件中app.json添加配置.

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色，仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

二、示例1，头部tab使用

tabBar配置如下：

"tabBar": {
    "color": "black",
    "selectedColor": "red",
    "backgroundColor": "orange",
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/movable/movable",
        "text": "移动测试"
      },
      {
        "pagePath": "pages/apptest/apptest",
        "text": "其他应用"
      }
    ]
  }

显示结果：

三、示例2，底部tab使用

tabBar配置如下：

 "tabBar": {
    "color": "gray",
    "selectedColor": "red",
    "backgroundColor": "orange",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "style/img/home_gray.png",
        "selectedIconPath": "style/img/home_red.png"
      },
      {
        "text": "个人中心",
        "pagePath": "pages/apptest/apptest",
        "iconPath": "style/img/person_gray.png",
        "selectedIconPath": "style/img/person_red.png"
      },
      {
        "text": "推广名片",
        "pagePath": "pages/card/card",
        "iconPath": "style/img/card_gray.png",
        "selectedIconPath": "style/img/card_red.png"
      }
    ]
  }

显示结果：

微信小程序中打开其他小程序、小程序之间跳转

http://ad.jnqianle.cn/ad/11.html

http://www.jnqianle.cn/Mina/Index

微信小程序tab使用整理

tabBar

猜你喜欢