TabBar.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <view class="tab-box">
  3. <view class="tab-list">
  4. <navigator class="tab-item" @click="tabClick(0)">
  5. <view class="tab-item-icon">
  6. <image v-if="store.tabIndex == 0" src="../../static/tabIcons/home_selected.png" mode="aspectFill"></image>
  7. <image v-else src="../../static/tabIcons/home.png" mode="aspectFill"></image>
  8. </view>
  9. <view class="tab-item-name">
  10. 首页
  11. </view>
  12. </navigator>
  13. <navigator class="tab-item" @click="tabClick(1)">
  14. <view class="tab-item-icon">
  15. <image v-if="store.tabIndex == 1" src="../../static/tabIcons/travel_selected.png" mode="aspectFill"></image>
  16. <image v-else src="../../static/tabIcons/travel.png" mode="aspectFill"></image>
  17. </view>
  18. <view class="tab-item-name">
  19. 游记
  20. </view>
  21. </navigator>
  22. <navigator class="tab-item" @click="tabClick(2)">
  23. <view class="tab-item-icon" style="width:80rpx;height:80rpx;">
  24. <image v-if="store.tabIndex == 2" src="../../static/tabIcons/publish_selected.png" mode="aspectFill"></image>
  25. <image v-else src="../../static/tabIcons/publish.png" mode="aspectFill"></image>
  26. </view>
  27. <!-- <view class="tab-item-name">
  28. 游记
  29. </view> -->
  30. </navigator>
  31. <navigator class="tab-item" @click="tabClick(3)">
  32. <view class="tab-item-icon">
  33. <image v-if="store.tabIndex == 3" src="../../static/tabIcons/chat_selected.png" mode="aspectFill"></image>
  34. <image v-else src="../../static/tabIcons/chat.png" mode="aspectFill"></image>
  35. </view>
  36. <view class="tab-item-name">
  37. 消息
  38. </view>
  39. </navigator>
  40. <navigator class="tab-item" @click="tabClick(4)">
  41. <view class="tab-item-icon">
  42. <image v-if="store.tabIndex == 4" src="../../static/tabIcons/mine_selected.png" mode="aspectFill"></image>
  43. <image v-else src="../../static/tabIcons/mine.png" mode="aspectFill"></image>
  44. </view>
  45. <view class="tab-item-name">
  46. 我的
  47. </view>
  48. </navigator>
  49. </view>
  50. </view>
  51. </template>
  52. <script setup>
  53. import {useStore} from "@/store/index.js"
  54. const store = useStore();
  55. function tabClick(index=0){
  56. store.tabIndex = index;
  57. }
  58. </script>
  59. <style lang="scss">
  60. .tab-box {
  61. width: 100vw;
  62. background: #fff;
  63. border-top: 1rpx solid #dedede;
  64. position: fixed;
  65. left: 0;
  66. bottom: 0;
  67. z-index: 10;
  68. padding-top: 10rpx;
  69. padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
  70. padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  71. .tab-list {
  72. width: 100%;
  73. height: 100rpx;
  74. display: flex;
  75. justify-content: space-between;
  76. }
  77. .tab-item {
  78. width: 20%;
  79. height: 100rpx;
  80. display: flex;
  81. flex-direction: column;
  82. align-items: center;
  83. justify-content: center;
  84. // border:1rpx solid red;
  85. .tab-item-icon {
  86. width: 60rpx;
  87. height: 60rpx;
  88. overflow: hidden;
  89. image {
  90. width: 100%;
  91. height: 100%;
  92. }
  93. }
  94. .tab-item-name {
  95. font-size: 28rpx;
  96. color:#8a8a8a;
  97. // margin-top:20rpx;
  98. }
  99. }
  100. }
  101. </style>