tabbarList.ts 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /**
  2. * tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
  3. * 0: 'NO_TABBAR' `无 tabbar`
  4. * 1: 'NATIVE_TABBAR' `完全原生 tabbar`
  5. * 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
  6. * 3: 'CUSTOM_TABBAR_NO_CACHE' `无缓存自定义 tabbar`
  7. *
  8. * 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致错误
  9. */
  10. export const TABBAR_MAP = {
  11. NO_TABBAR: 0,
  12. NATIVE_TABBAR: 1,
  13. CUSTOM_TABBAR_WITH_CACHE: 2,
  14. CUSTOM_TABBAR_NO_CACHE: 3,
  15. }
  16. // TODO:通过这里切换使用tabbar的策略
  17. export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
  18. // selectedTabbarStrategy==NATIVE_TABBAR(1) 时,需要填 iconPath 和 selectedIconPath
  19. // selectedTabbarStrategy==CUSTOM_TABBAR(2,3) 时,需要填 icon 和 iconType
  20. // selectedTabbarStrategy==NO_TABBAR(0) 时,tabbarList 不生效
  21. export const tabbarList = [
  22. {
  23. iconPath: 'static/tabbar/home.png',
  24. selectedIconPath: 'static/tabbar/homeHL.png',
  25. pagePath: 'pages/index/index',
  26. text: '首页',
  27. icon: 'home',
  28. iconType: 'uiLib',
  29. },
  30. {
  31. iconPath: 'static/tabbar/example.png',
  32. selectedIconPath: 'static/tabbar/exampleHL.png',
  33. pagePath: 'pages/about/about',
  34. text: '关于',
  35. icon: 'i-carbon-code',
  36. // 注意 unocss 的图标需要在 页面上引入一下,或者配置到 unocss.config.ts 的 safelist 中
  37. iconType: 'unocss',
  38. },
  39. // {
  40. // pagePath: 'pages/my/index',
  41. // text: '我的',
  42. // icon: '/static/logo.svg',
  43. // iconType: 'local',
  44. // },
  45. // {
  46. // pagePath: 'pages/mine/index',
  47. // text: '我的',
  48. // icon: 'iconfont icon-my',
  49. // iconType: 'iconfont',
  50. // },
  51. ]
  52. // NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时,需要tabbar缓存
  53. export const cacheTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.NATIVE_TABBAR
  54. || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
  55. const _tabbar = {
  56. color: '#999999',
  57. selectedColor: '#018d71',
  58. backgroundColor: '#F8F8F8',
  59. borderStyle: 'black',
  60. height: '50px',
  61. fontSize: '10px',
  62. iconWidth: '24px',
  63. spacing: '3px',
  64. list: tabbarList,
  65. }
  66. // 0和1 需要显示底部的tabbar的各种配置,以利用缓存
  67. export const tabBar = cacheTabbarEnable ? _tabbar : undefined