tabbarList.ts 2.4 KB

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