微信小程序第三节:tabBar标签栏添加

举报
川川菜鸟 发表于 2022/06/16 22:47:10 2022/06/16
【摘要】 效果 参照tabBar官方文档: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.h...

效果

在这里插入图片描述

参照tabBar官方文档:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
在这里插入图片描述

源码

部分参数含义:

  • pagePath:页面路径
  • text:标签名
  • iconPath:未选中图标
  • selectedIconPath:选中图标

添加tabBar后全部源码:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/img/img",
    "pages/search/search",
    "pages/mine/mine"
  ],
  "tabBar": {
      "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "icon/_home.png",
          "selectedIconPath": "icon/home.png"
      },{
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      },{
        "pagePath": "pages/img/img",
        "text": "图片",
        "iconPath": "icon/_img.png",
        "selectedIconPath": "icon/img.png"
      },{
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "icon/_my.png",
        "selectedIconPath": "icon/my.png"
      }
    ],
    "color": "#FF00FF",
    "backgroundColor": "#FFF5EE",
    "position":"bottom"
  },
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#0094ff", 
    "navigationBarTitleText": "川川",  
    "navigationBarTextStyle": "black" ,
    "enablePullDownRefresh": true,
    "backgroundColor": "#FF4500"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

  
 

效果请看前面。注意:各种样式的添加是与list并列的,具体参数及含义请看官方文档:
在这里插入图片描述

文章来源: chuanchuan.blog.csdn.net,作者:川川菜鸟,版权归原作者所有,如需转载,请联系作者。

原文链接:chuanchuan.blog.csdn.net/article/details/125306129

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。