linwe
2024-08-08 3c738f4fe2762bba8087e5a22fc0dc06560eab0e
components/tabBar/tabBar.vue
@@ -1,9 +1,9 @@
<template>
   <view>
      <u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
      <u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor"
         :inactive-color="inactiveColor">
         <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index)" v-for="(item,index) in tabbarList"
            :key="index">
         <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)"
            v-for="(item,index) in tabbarList" :key="index">
            <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
         </u-tabbar-item>
@@ -23,15 +23,23 @@
      data() {
         return {
            tabbarList: [],
            inactiveColor: '#AFB8C3',
            activeColor: '#5086FA',
            inactiveColor: '#C7CED7',
            activeColor: '#017BFC',
            // activeColor: '#003399'
         }
      },
      watch: {
         list: {
            handler(newVal) {
               if (newVal && newVal.length > 0) {
                  this.tabbarList = newVal
                  this.tabbarList = newVal;
                  if (uni.getStorageSync("activeRole").roleName == "民警") {
                     this.inactiveColor = "#AFB8C3";
                     this.activeColor = "#003399";
                  } else {
                     this.inactiveColor = "#C7CED7"
                     this.activeColor = "#017BFC";
                  }
               }
            },
            deep: true,
@@ -56,4 +64,8 @@
      width: 56rpx;
      height: 56rpx;
   }
   /deep/.u-tabbar {
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2);
   }
</style>