全局配置-案例:配置tabBar

一、需求:实现如图所示的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"
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值