微信小程序之切换页签tab

微信小程序之切换页签tab

最近在自己学习微信小程序，为了印象深刻从简单到复杂给自己做一个笔记
在Android中我们要做底部的标签栏 虽然不难 但是代码量还是很大的，这里我们看一下微信小程序的tab是如何实现的，首先先看图

• 1
• 2
• 3

 
在app.json中做配置 代码如下

"tabBar": {
    "color": "#6e6d6b",
    //选中的颜色
    "selectedColor": "#f9f027",
    "backgroundColor": "#292929",
    "borderStyle": "white",
    //设置tab的位置 bottom 底部   top 顶部
    "position":"bottom",
    "list": [{
    //按下图片界面跳转路径
      "pagePath": "pages/index/index",
      //默认图片
      "iconPath":"images/footer-icon-01.png",
      //选中后的图片
      "selectedIconPath":"images/footer-icon-01-active.png",
     // 页签的文字描述
      "text": "极速免税"

    },
    {
      "pagePath": "pages/classify/index",
      "iconPath": "images/footer-icon-02.png",
      "selectedIconPath": "images/footer-icon-02-active.png",
      "text": "分类"

    },{
        "pagePath": "pages/cart/index",
        "iconPath": "images/footer-icon-03.png",
        "selectedIconPath": "images/footer-icon-03-active.png",
        "text": "购物车"
    }
    ,
    {
      "pagePath": "pages/my/index",
      "iconPath": "images/footer-icon-04.png",
      "selectedIconPath": "images/footer-icon-04-active.png",
      "text": "我的"
    }]
  }