custom-tabbar.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view class="ezy-custom-tabbar">
  3. <view class="tabbar-item-box">
  4. <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path)"
  5. :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. import {
  11. useTabBarHistory
  12. } from '@/utils/emitEvents.js';
  13. import {
  14. toast
  15. } from '@/utils/common'
  16. export default {
  17. data() {
  18. return {
  19. tabList: [{
  20. iconPath: 'static/images/tabbar/unselect/plan-sj.png',
  21. path: `/pages/study/index`
  22. },
  23. {
  24. iconPath: 'static/images/tabbar/unselect/partner-sj.png',
  25. path: '/pages/game/index'
  26. },
  27. {
  28. iconPath: 'static/images/tabbar/unselect/my-sj.png',
  29. path: `/pages/my/index`
  30. },
  31. // 更多 Tab 项...
  32. ]
  33. };
  34. },
  35. methods: {
  36. switchTab(path, params = {}) {
  37. if(path =='/pages/study/index2'||path =='/pages/study/index3'){
  38. toast("此功能页面暂未开放!")
  39. return false
  40. }
  41. let storage = useTabBarHistory().getTabBarStorage()
  42. let queryString = Object.keys(storage).map(key =>
  43. `${encodeURIComponent(key)}=${encodeURIComponent(storage[key])}`).join('&');
  44. if (queryString) {
  45. path += `?${queryString}`;
  46. }
  47. uni.navigateTo({
  48. url: path
  49. });
  50. // 使用 uni.switchTab 进行跳转(适用于 tabBar 页面)
  51. // if (this.isTabBarPage(path)) {
  52. // uni.switchTab({
  53. // url: path
  54. // });
  55. // } else {
  56. // // 使用 uni.navigateTo 进行跳转(适用于非 tabBar 页面)
  57. // uni.navigateTo({
  58. // url: path
  59. // });
  60. // }
  61. },
  62. isTabBarPage(path) {
  63. // 根据你的 tabBar 页面路径进行判断
  64. const tabBarPages = ['/pages/study/index', '/pages/study/index', '/pages/study/index', '/pages/my/index'];
  65. return tabBarPages.includes(path);
  66. }
  67. },
  68. created() {
  69. }
  70. }
  71. </script>
  72. <style scoped>
  73. .custom-tabbar {
  74. display: flex;
  75. justify-content: space-around;
  76. align-items: center;
  77. /* 其他样式 */
  78. }
  79. .tab-item {
  80. flex: 1;
  81. /* 样式 */
  82. }
  83. .tab-icon {
  84. /* 图标样式 */
  85. }
  86. </style>