当前位置:   article > 正文

全局配置-案例:配置tabBar

全局配置-案例:配置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被选中后高亮的图片路径

  1. {
  2. "pages": [
  3. "pages/home/home",
  4. "pages/message/message",
  5. "pages/contact/contact",
  6. "pages/index/index",
  7. "pages/test/test",
  8. "pages/logs/logs"
  9. ],
  10. "window": {
  11. "navigationBarTextStyle": "white",
  12. "navigationBarTitleText": "NA",
  13. "navigationBarBackgroundColor": "#2b4b6b",
  14. "enablePullDownRefresh":true,
  15. "backgroundColor":"#efefef"
  16. },
  17. "tabBar":{
  18. "list":[
  19. {
  20. "pagePath": "pages/home/home",
  21. "text":"首页",
  22. "iconPath":"/image/home.png",
  23. "selectedIconPath":"/image/home-active.png"
  24. },
  25. {
  26. "pagePath": "pages/message/message",
  27. "text":"消息",
  28. "iconPath":"/image/message.png",
  29. "selectedIconPath":"/image/message-active.png"
  30. },
  31. {
  32. "pagePath": "pages/contact/contact",
  33. "text":"联系我们",
  34. "iconPath":"/image/contact.png",
  35. "selectedIconPath":"/image/contact-active.png"
  36. }
  37. ]
  38. },
  39. "style": "v2",
  40. "componentFramework": "glass-easel",
  41. "sitemapLocation": "sitemap.json",
  42. "lazyCodeLoading": "requiredComponents"
  43. }

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号