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

效果

在这里插入图片描述

参照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并列的,具体参数及含义请看官方文档:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_46211269/article/details/125306129