绿满眶商城微信小程序-uniapp
peng
2025-06-27 b6b1a34a610795ed5ea8dd8658955ea4c9a0d401
components/custom-tabbar.vue
@@ -1,17 +1,11 @@
<!-- 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)"
    >
      <image
        :src="selected === item.key ? item.selectedIconPath : item.iconPath"
        :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}"
      />
      <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}">
   <view class="custom-tabbar" :style="{backgroundColor: bgColor, marginBottom: marginBottom + 'px'}">
      <view v-for="(item, index) in list" :key="index" class="tabbar-item" @click="switchTab(item)">
         <image :src="selected === item.key ? item.selectedIconPath : item.iconPath"
            :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}" />
         <text class="tabbar-text" v-if="item.text"
            :style="{color: selected === item.key ? selectedTextColor : color}">
        {{item.text}}
      </text>
    </view>
@@ -38,8 +32,8 @@
  data() {
    return {
      color: '#999999',
      list: [
         {
            marginBottom: 0,
            list: [{
              "pagePath": "/pages/tabbar/index/home",
              "iconPath": "/static/tabbar/home.png",
              "selectedIconPath": "/static/tabbar/home-s.png",
@@ -78,6 +72,10 @@
      ]
    }
  },
      created() {
         console.log("底部安全区域", uni.getSystemInfoSync().safeAreaInsets);
         this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
      },
  methods: {
    switchTab(item) {
      console.log("执行力", item);
@@ -110,10 +108,12 @@
  align-items: center;
  justify-content: center;
}
.video-add {
  width: 30px !important;
  height: 30px !important;
}
.tabbar-icon {
  width: 24px;
  height: 24px;