自定义tabbar，首页视频使用不同颜色的tabbar

xiangpei

2025-05-15 305691dd3759e3bd95fdd70ff46693d04f2925d4

自定义tabbar，首页视频使用不同颜色的tabbar

 components/custom-tabbar.vue

New file
@@ -0,0 +1,112 @@
<!-- components/custom-tabbar.vue -->
<template>
  <view class="custom-tabbar" :style="{backgroundColor: bgColor}">
    <view 
      v-for="(item, index) in list" 
      :key="index"
      class="tabbar-item"
      @click="switchTab(item, index)"
    >
      <image 
        :src="selected === index ? item.selectedIconPath : item.iconPath" 
        class="tabbar-icon"
      />
      <text class="tabbar-text" :style="{color: selected === index ? selectedTextColor : color}">
        {{item.text}}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomTabbar",
  props: {
    selected: {
      type: Number,
      default: 0
    },
    bgColor: {
      type: String,
      default: '#333333'
    },
    selectedTextColor: {
      type: String,
      default: '#ff573e'
    }
  },
  data() {
    return {
      color: '#999999',
      list: [
            {
                "pagePath": "/pages/tabbar/index/home",
                "iconPath": "/static/tabbar/home.png",
                "selectedIconPath": "/static/tabbar/home-s.png",
                "text": "首页"
            },
            {
                "pagePath": "/pages/tabbar/category/category",
                "iconPath": "/static/tabbar/category.png",
                "selectedIconPath": "/static/tabbar/category-s.png",
                "text": "分类"
            },
        
            {
                "pagePath": "/pages/tabbar/cart/cartList",
                "iconPath": "/static/tabbar/cart.png",
                "selectedIconPath": "/static/tabbar/cart-s.png",
                "text": "购物车"
            },
            {
                "pagePath": "/pages/tabbar/user/my",
                "iconPath": "/static/tabbar/mine.png",
                "selectedIconPath": "/static/tabbar/mine-s.png",
                "text": "我的"
            }
      ]
    }
  },
  methods: {
    switchTab(item, index) {
        console.log("执行力", item, index);
      if (this.selected === index) return;
      uni.switchTab({
        url: item.pagePath
      });
    }
  }
}
</script>

<style>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ededed;
  box-sizing: border-box;
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tabbar-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.tabbar-text {
  font-size: 10px;
}
</style>

 main.js

@@ -6,6 +6,11 @@
import config from '@/config/config';
import airBtn from "@/components/m-airbtn/index.vue";
import socketIO from './pages/mine/im/socket';

// 自定义tabbar
import CustomTabbar from '@/components/custom-tabbar.vue'
Vue.component('custom-tabbar', CustomTabbar)

/**
 * 仅在h5中显示唤醒app功能
 * 在h5页面手动挂载

 pages.json

@@ -11,7 +11,7 @@
            {
                // "navigationBarTitleText" : "视频",
                "enablePullDownRefresh" : false,
                "navigationStyle": "custom"
                "navigationStyle": "custom" // 隐藏顶部导航栏
            }
        },
        {
@@ -830,6 +830,7 @@
        }
    },
    "tabBar": {
        "custom": true,
        "color": "#666",
        "selectedColor": "#ff573e",
        "borderStyle": "black",

 pages/tabbar/cart/cartList.vue

@@ -1,5 +1,5 @@
<template>
  <div class="wrapper">
  <view class="wrapper">
    <u-navbar :is-back="false" title="购物车">
      <div slot="right">
        <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成'}}</div>
@@ -175,7 +175,8 @@
      </view>
    </div>
    <u-toast ref="uToast" />
  </div>
    <custom-tabbar bgColor="#ffffff" :selected="2"></custom-tabbar>
  </view>
</template>
<script>
import * as API_Trade from "@/api/trade";
@@ -623,7 +624,7 @@
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: calc(100vh - 50px);
  z-index: 99;
  padding-bottom: var(--window-bottom);
  display: flex;
@@ -688,7 +689,7 @@
}

.wrapper {
  height: 100%;
  height: calc(100% - 50px);;
}

/deep/ .u-col {
@@ -774,7 +775,7 @@
  justify-content: space-between;
  position: fixed;
  // #ifdef APP-PLUS || MP-WEIXIN
  bottom: 0;
  bottom: 50px;
  // #endif
  // #ifdef H5
  bottom: var(--window-bottom);

 pages/tabbar/category/category.vue

@@ -36,6 +36,7 @@
        </view>
      </scroll-view>
    </view>
    <custom-tabbar bgColor="#ffffff" :selected="1"></custom-tabbar>
  </view>
</template>


 pages/tabbar/index/home.vue

@@ -81,6 +81,7 @@
        </view>
      </swiper-item>
    </swiper>
    <custom-tabbar bgColor="#333333" :selected="0" selectedTextColor="#ffffff"></custom-tabbar>
  </view>
</template>

@@ -233,6 +234,9 @@
</script>

<style scoped>
    ::v-deep .custom-tabbar {
        border-top: none !important;
    }
    .video-container {
      width: 100%;
      height: 100vh;
@@ -253,7 +257,7 @@
    .video-info {
      width: 70%;
      position: absolute;
      bottom: 50px;
      bottom: 70px;
      left: 20px;
      color: #f8f8f8;
      z-index: 10;
@@ -320,7 +324,7 @@
    /* 商品链接悬挂层样式 */
    .goods-link-warp {
        position: absolute;
        bottom: 100px;
        bottom: 160px;
        left: 20px;
        color: #f8f8f8;
        z-index: 10;

 pages/tabbar/user/my.vue

@@ -71,7 +71,7 @@
    <!-- 常用工具 -->

    <tool />

  <custom-tabbar bgColor="#ffffff" :selected="3"></custom-tabbar>
  </view>
</template>
<script>