全局配置-案例:配置tabBar

发布于:2024-06-03 ⋅ 阅读:(138) ⋅ 点赞:(0)

一、需求:实现如图所示的tabBar效果

二、实现步骤:

1.拷贝图标资源

把image文件夹拷贝到小程序项目根目录中

图片中包含-active的是选中之后的图标

图片中不包含-active的是默认图标

2.新建3个对应的tab页面

3.配置tabBar选项

(1)打开app.json配置文件,和pages、windows平级,新增tabBar节点

(2)tabBar节点中,新增list数组,存放每个tab项的配置对象

(3)在list数组中,新增每一个tab项的配置对象,对象中包含的属性如下:

          pagePath指定当前tab对应的页面路径(必填)

          text指定当前tab上按钮的文字(必填)

          iconPath指定当前tab未选中时候的图片路径

          selectedIconPath指定当前tab被选中后高亮的图片路径

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact",
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
  ],  
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "NA",
    "navigationBarBackgroundColor": "#2b4b6b",
    "enablePullDownRefresh":true,
    "backgroundColor":"#efefef"
  },

  "tabBar":{
    "list":[
      {
        "pagePath": "pages/home/home",
        "text":"首页",
        "iconPath":"/image/home.png",
        "selectedIconPath":"/image/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text":"消息",
        "iconPath":"/image/message.png",
        "selectedIconPath":"/image/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text":"联系我们",
        "iconPath":"/image/contact.png",
        "selectedIconPath":"/image/contact-active.png"
      }
    ]
  },

  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}


网站公告

今日签到

点亮在社区的每一天
去签到