微信小程序(tabBar)

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景,详细的可以参考微信官方文档tabBar

​​​​​​​地址

使用流程:

自定义tabBar必须要有2个tab

1.先把自己的菜单栏图片添加到项目中

2.使用tabBar要在全局的app.json中使用

2.1:利用全局app.json创建几个tab 页面

    "pages/index/index",
    "pages/cart/cart",
    "pages/category/category",
    "pages/my/my"

2.2:在app.json中使用tabBar

命令解读:

pagePath:图二的所创建的tab页面

text:文本

iconPtian:你所导入项目的图标地址

selectedIconPath:选中后的图标地址

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/icons/home.png",
      "selectedIconPath": "/icons/home-0.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/icons/cart.png",
      "selectedIconPath": "/icons/cart-0.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "菜单栏",
      "iconPath": "/icons/category.png",
      "selectedIconPath": "/icons/category-0.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "我的",
      "iconPath": "/icons/my.png",
      "selectedIconPath": "/icons/my-0.png"
    }
  ]}

如果想要在默认启动页用tabBar,可以把pagePath设置成app.json-->pages数组中的第一个就可以了。

效果图:

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值