小程序之Tab切换

Posted 2020-10-28 南方有梦，远方有止

之前写的那个Tab切换是常规逻辑写的，接下来我会列出小程序api自带的写法，当然了 这个写法更加简单，实用。我们只需要配置app.json这个文件即可。

先看效果图：

app.json代码：（有木有感觉很简单的样子哈哈）

"tabBar": {
    "color":"#fff",
    "selectedColor":"#1296db",
    "backgroundColor":"#ccc",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"images/iconHome.png",
        "selectedIconPath":"images/seleHome.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "地址",
        "iconPath": "images/iconMap.png",
        "selectedIconPath": "images/seleMap.png"
      }
    ]
  },

 

☀下面是app.json 配置项列表：

☀tabBar属性说明：

☀list的属性说明：

PS：

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