微信小程序入门四: 导航栏样式、tabBar导航栏

本文介绍了如何在小程序中设置导航栏样式及tabBar导航栏。包括导航栏背景颜色、文字颜色和内容等设置方法,以及tabBar的使用,如定义tab上的文字、图标及其选中状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


实例内容

  • 导航栏样式设置
  • tabBar导航栏

实例一:导航栏样式设置

小程序的导航栏样式在app.json中定义。

这里设置导航,背景黑色,文字白色,文字内容测试小程序

app.json内容:

{
  "pages":[
    "pages/index/index",
    "pages/login/login",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"red",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "测试小程序",
    "navigationBarTextStyle":"#fff"
  }
}

window中的样式说明:

属性类型默认值描述
navigationBarBackgroundColorHexColor000000 导航栏背景颜色,如”#000000”
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black/white
navigationBarTitleTextString导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新

效果:


实例二:tabBar导航栏

tabBar挺好的,可以放置于顶部或者底部,用于不同功能页面的切换。

tabBar同样在app.json中进行定义,看一下我在app.json中对tabBar的相关定义:

  "tabBar": {
    "selectedColor": "#1296db",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/ico-home.png",
      "selectedIconPath": "images/ico-home-d.png"
    },{
      "pagePath": "pages/setting/setting",
      "text": "设置",
      "iconPath": "images/ico-setting.png",
      "selectedIconPath": "images/ico-setting-d.png"
    },{
      "pagePath": "pages/help/help",
      "text": "帮助",
      "iconPath": "images/ico-help.png",
      "selectedIconPath": "images/ico-help-d.png"
    }]
  }

效果:

tabBar相关属性定义说明:

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、top

tabBar list定义说明:

属性类型必填说明
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

图标资源可以从这里获取:www.iconfont.cn


博客名称:王乐平博客

博客地址:http://blog.lepingde.com

优快云博客地址:http://blog.youkuaiyun.com/lecepin


这里写图片描述

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王乐平

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值