小程序实现底部tabber

在微信开发者工具中的app.json中写上:
也可在微信小程序中找到的tabber

"tabBar": {
    "color": "cdcdcd",      //没有点亮的颜色
    "selectedColor": "d81e06",        //点击之后的颜色
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",     //跳转的页面
        "iconPath": "./img/index_.png",      //点击之后的图标
        "selectedIconPath": "./img/index.png"      //点击之前的图标
      },
      {
        "text": "分类",
        "pagePath": "pages/classify/classify",
        "iconPath": "./img/classify_.png",
        "selectedIconPath": "./img/classify.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/shop/shop",
        "iconPath": "./img/shop_.png",
        "selectedIconPath": "./img/shop.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/mine/mine",
        "iconPath": "./img/mine_.png",
        "selectedIconPath": "./img/mine.png"
      }
    ]
  }

之后他的效果是:
在这里插入图片描述

你可能感兴趣的:(小程序实现底部tabber)