绿满眶商城微信小程序-uniapp
zxl
4 天以前 c9928dd4f6d25e2339ea1400f59ec58674a927a7
components/custom-tabbar.vue
@@ -5,13 +5,13 @@
      v-for="(item, index) in list" 
      :key="index"
      class="tabbar-item"
      @click="switchTab(item, index)"
      @click="switchTab(item)"
    >
      <image 
        :src="selected === index ? item.selectedIconPath : item.iconPath"
        class="tabbar-icon"
        :src="selected === item.key ? item.selectedIconPath : item.iconPath"
        :class="{'tabbar-icon': true, 'video-add': item.key == 'video'}"
      />
      <text class="tabbar-text" :style="{color: selected === index ? selectedTextColor : color}">
      <text class="tabbar-text" v-if="item.text" :style="{color: selected === item.key ? selectedTextColor : color}">
        {{item.text}}
      </text>
    </view>
@@ -23,8 +23,8 @@
  name: "CustomTabbar",
  props: {
    selected: {
      type: Number,
      default: 0
      type: String,
      default: 'index'
    },
    bgColor: {
      type: String,
@@ -43,34 +43,45 @@
              "pagePath": "/pages/tabbar/index/home",
              "iconPath": "/static/tabbar/home.png",
              "selectedIconPath": "/static/tabbar/home-s.png",
              "text": "首页"
              "text": "首页",
            "key": 'index'
           },
           {
              "pagePath": "/pages/tabbar/category/category",
              // "pagePath": "/pages/tabbar/category/category",
            "pagePath": "/pages/commodity-square/commoditySquare",
              "iconPath": "/static/tabbar/category.png",
              "selectedIconPath": "/static/tabbar/category-s.png",
              "text": "分类"
              "text": "商城",
            "key": 'shop'
           },
         {
            "pagePath": "/pages/tabbar/video/video",
            "iconPath": "/static/tabbar/video1.png",
            "selectedIconPath": "/static/tabbar/video1-selected.png",
            "key": 'video'
         },
           {
              "pagePath": "/pages/tabbar/cart/cartList",
              "iconPath": "/static/tabbar/cart.png",
              "selectedIconPath": "/static/tabbar/cart-s.png",
              "text": "购物车"
              "text": "购物车",
            "key": 'buyCar'
           },
           {
              "pagePath": "/pages/tabbar/user/my",
              "iconPath": "/static/tabbar/mine.png",
              "selectedIconPath": "/static/tabbar/mine-s.png",
              "text": "我的"
              "text": "我的",
            "key": 'my'
           }
      ]
    }
  },
  methods: {
    switchTab(item, index) {
      console.log("执行力", item, index);
      if (this.selected === index) return;
    switchTab(item) {
      console.log("执行力", item);
      if (this.selected === item.key) return;
      uni.switchTab({
        url: item.pagePath
      });
@@ -99,7 +110,10 @@
  align-items: center;
  justify-content: center;
}
.video-add {
  width: 30px !important;
  height: 30px !important;
}
.tabbar-icon {
  width: 24px;
  height: 24px;