专栏首页前端资源【笔记】微信小程序通过app.json设置底部导航

【笔记】微信小程序通过app.json设置底部导航

首先,您可以在阿里图标库选择合适的图标,使用方法

我选了几个图标,选中不选中颜色有个区分:

底部菜单最少设置2个最多可以设置5个。

找到项目根目录的配置文件 app.json 加入如下配置信息:

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#E50012",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/index_h.png",
        "iconPath": "images/index.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/tel_h.png",
        "iconPath": "images/tel.png",
        "pagePath": "pages/index/index",
        "text": "联系我们"
      },
      {
        "selectedIconPath": "images/my_h.png",
        "iconPath": "images/my.png",
        "pagePath": "pages/index/index",
        "text": "我的"
      }
    ]
  }

tabBar 是底部菜单

color 字体颜色

borderStyle tabbar上边框的颜色, 仅支持 black/white

list 列表

selectedIconPath 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效

iconPath 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片

pagePath 页面路径,必须在 pages 中先定义

text tab上按钮文字

参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

效果如图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 获取不同手机浏览器的实际可用高度代码分享

    但是不同手机浏览器有自己的地址栏、状态栏等,window.screen.availHeight 取到的屏幕高度也包括了这两者,导至本来希望满屏显示的内容出现滚动...

    德顺
  • 程序员应该掌握的600个英语单词

    application 应用程式 应用、应用程序  application framework 应用程式框架、应用框架 应用程序框架  architecture...

    德顺
  • PhpStorm表单提交时获取不到post数据的解决方法

    初学php,用echo $_POST["variable"]和var_dump($_POST) 都获取不到post数据。

    德顺
  • 你的管理员可信吗?五条构建管理员信任的建议

    内部和外部网络管理员拥有访问权限,这可能会导致滥用和错误,从而暴露系统和数据。以下这些做法可以帮助避免这种情况。

    FB客服
  • 聊聊dubbo的DubboComponentScanRegistrar

    本文主要研究一下dubbo的DubboComponentScanRegistrar

    codecraft
  • 聊聊dubbo的DubboComponentScanRegistrar

    本文主要研究一下dubbo的DubboComponentScanRegistrar

    codecraft
  • PayPal创始人《从0到1》作者彼得•蒂尔,上周宣布与他的同性男友结婚了

    大数据文摘
  • 可以证明上帝存在的理论

    宇相
  • 关于Redis RedLock算法的争论

    内容简介:Martin上来就问,我们要锁来干啥呢?2个原因:对于第1种原因,我们对锁是有一定宽容度的,就算发生了两个节点同时工作,对系统的影响也仅仅是多付出了一...

    stys35
  • Python数据分析之scikit-learn与数据预处理​

    预处理操作是机器学习整个周期中必不可少的一个过程,也是最能快速改善模型性能的一个过程,往往稍微转换一下特征属性的形态,就能得到性能的极大提升。当然,数据预处理绝...

    统计学家

扫码关注云+社区

领取腾讯云代金券