敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
2.9 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
3 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="tabbar-box">
  3. <view class="tabbar">
  4. <view :class="{ 'tabbar-active' : select == item.key}" v-for="(item, index) in list" :key="index"
  5. v-if="!item.isNotShop || !userShop" @click="toPath(item, index)" class="tabbar-item">
  6. <view class="tabbar-icon">
  7. <image :src="select == item.key ?
  8. item.selectedIconPath :
  9. item.iconPath" class="tabbar-icon-image" mode="aspectFill"></image>
  10. </view>
  11. <view class="tabbar-title">
  12. {{ item.title }}
  13. </view>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. name: "tabbar",
  21. props: ['select'],
  22. computed: {
  23. },
  24. data() {
  25. return {
  26. list: [
  27. {
  28. "selectedIconPath": "/static/image/tabbar/home-active.png",
  29. "iconPath": "/static/image/tabbar/home.png",
  30. "pagePath": "/pages/index/index",
  31. "title": "首页",
  32. key: 'index',
  33. },
  34. {
  35. "selectedIconPath": "/static/image/tabbar/product-list-active.png",
  36. "iconPath": "/static/image/tabbar/product-list.png",
  37. "pagePath": "/pages/index/category",
  38. "title": "商品",
  39. key: 'category',
  40. },
  41. {
  42. "selectedIconPath": "/static/image/tabbar/order-active.png",
  43. "iconPath": "/static/image/tabbar/order.png",
  44. "pagePath": "/pages/index/order",
  45. "title": "订单",
  46. key: 'order',
  47. },
  48. {
  49. "selectedIconPath": "/static/image/tabbar/cart-active.png",
  50. "iconPath": "/static/image/tabbar/cart.png",
  51. "pagePath": "/pages/index/cart",
  52. "title": "购物车",
  53. key: 'cart',
  54. },
  55. {
  56. "selectedIconPath": "/static/image/tabbar/user-center-active.png",
  57. "iconPath": "/static/image/tabbar/user-center.png",
  58. "pagePath": "/pages/index/center",
  59. "title": "我的",
  60. key: 'center',
  61. }
  62. ]
  63. };
  64. },
  65. methods: {
  66. toPath(item, index) {
  67. if (item.key == this.select) {
  68. return
  69. }
  70. uni.reLaunch({
  71. url: item.pagePath
  72. })
  73. },
  74. }
  75. }
  76. </script>
  77. <style scoped lang="scss">
  78. .tabbar-box {
  79. height: 120rpx;
  80. padding-bottom: env(safe-area-inset-bottom);
  81. // background-color: #fff;
  82. .tabbar {
  83. position: fixed;
  84. width: 750rpx;
  85. background-color: #fff;
  86. display: flex;
  87. justify-content: center;
  88. align-items: center;
  89. flex-direction: row;
  90. height: 120rpx;
  91. padding-bottom: env(safe-area-inset-bottom);
  92. z-index: 999999;
  93. bottom: 0;
  94. left: 0;
  95. color: #000;
  96. .tabbar-item {
  97. flex: 1;
  98. display: flex;
  99. flex-direction: column;
  100. justify-content: center;
  101. align-items: center;
  102. .tabbar-icon {
  103. width: 54rpx;
  104. height: 54rpx;
  105. .tabbar-icon-image {
  106. width: 54rpx;
  107. height: 54rpx;
  108. }
  109. }
  110. .tabbar-title {
  111. overflow: hidden;
  112. white-space: nowrap;
  113. text-overflow: ellipsis;
  114. -o-text-overflow: ellipsis;
  115. font-size: 23rpx;
  116. line-height: 35rpx;
  117. }
  118. }
  119. .tabbar-active {
  120. color: $uni-color !important;
  121. }
  122. }
  123. }
  124. </style>