码迷,mamicode.com
首页 > 微信 > 详细

微信小程序添加底部自定义导航栏(tabBar)

时间:2020-02-20 15:15:26      阅读:1344      评论:0      收藏:0      [点我收藏+]

标签:微信   微信小程序   message   col   图片   示例   developer   nbsp   MinIP   

tabBar参数说明参考: 官网文档

具体配置:

1、在app.json中添加你的自定义导航栏信息(名字,点击前图片,点击后图片,要跳转的界面等等)

注意事项:tabBar最多五个

 

参考示例:

技术图片
"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#937bf5",
    "list": [
      {
        "iconPath": "images/tabbar/index.png",
        "selectedIconPath": "images/tabbar/index_active.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "images/tabbar/near.png",
        "selectedIconPath": "images/tabbar/near_active.png",
        "pagePath": "pages/near/near",
        "text": "附近"
      },
      {
        "iconPath": "images/tabbar/message.png",
        "selectedIconPath": "images/tabbar/message_active.png",
        "pagePath": "pages/message/message",
        "text": "消息"
      },
      {
        "iconPath": "images/tabbar/user.png",
        "selectedIconPath": "images/tabbar/user_active.png",
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
View Code

 

微信小程序添加底部自定义导航栏(tabBar)

标签:微信   微信小程序   message   col   图片   示例   developer   nbsp   MinIP   

原文地址:https://www.cnblogs.com/yhnet/p/12335590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!