小程序实现tabBar

49 阅读1分钟

小程序实现tabBar

创建页面,与tab数量相同

在app.json里注册页面

 "pages":[
    "pages/index/index",
    "pages/categray/index",
    "pages/cart/index",
    "pages/my/index"
  ],

在app.json里添加tabBar配置文件

"tabBar": {
    "backgroundColor": "#ffffff",
    "selectedColor": "#e64340",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./images/home-off.png",
      "selectedIconPath": "./images/home-on.png"
    },{
      "pagePath": "pages/categray/index",
      "text": "分类",
      "iconPath": "./images/ic_catefory_normal.png",
      "selectedIconPath": "./images/ic_catefory_pressed.png"
    },{
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "./images/cart-off.png",
      "selectedIconPath": "./images/cart-on.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "./images/my-off.png",
      "selectedIconPath": "./images/my-on.png"
    }]
  },

实现截图

image.png