底部自定义导航

Lou

2024-03-19 6452a29d1809b92ecb64b8f7bb6798db4503ffa0

 components/tabBar/tabBar.vue

@@ -2,21 +2,10 @@
   <view>
      <u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
         :inactive-color="inactiveColor">
         <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
         </u-tabbar-item>
         <!--          <u-tabbar-item text="圈子">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item> -->
         <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item>
         <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
         <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index)" 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>
      </u-tabbar>
   </view>
@@ -26,117 +15,45 @@
   export default {
      props: {
         current: Number,
         isShowTabbarItem: false
         list: {
            type: Array,
            default: () => []
         }
      },
      data() {
         return {

            roleType: "",
            curRole: {},
            inactiveColor: '#909399',
            activeColor: '#328CFA',

            curTabList: [{
                  name: '首页',
                  iconPathSelected: '/static/img/tabbar-01-selected.png',
                  iconPath: '/static/img/tabbar-01.png',
                  // icon: "home",
                  url: '/pages/home/index'
               },

               {
                  name: '圈子',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/home/index'
               },
               {
                  name: '驾驶舱',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/statistics/index'
               },


               {
                  name: '个人中心',
                  iconPathSelected: '/static/img/tabbar-03-selected.png',
                  iconPath: '/static/img/tabbar-03.png',
                  // icon: "account-fill",
                  url: '/pages/user/center'
               }
            ]
            tabbarList: [],
            inactiveColor: '#AFB8C3',
            activeColor: '#5086FA',
         }
      },
      watch: {
         'curRole.roleName': {
            handler(newVal) {
               if (newVal == "民警") {
                  this.roleType = 2
               }
            },
            deep: true,
            immediate: true
         },


         tabList: {
         list: {
            handler(newVal) {
               if (newVal && newVal.length > 0) {
                  this.tabList = newVal
                  this.tabbarList = newVal
               }
            },
            deep: true,
            immediate: true
         },
         currentTab: {
            handler(newVal) {
               this.currentTab = newVal
            },
            deep: true,
            immediate: true
         },

         }
      },
      mounted() {

         this.curRole = uni.getStorageSync("activeRole");

         // this.getMessage()
      },
      destroyed() {

      },
      methods: {


         changeTabbar(url) {
            uni.reLaunch({
         changeTabbar(url, index) {
            if (this.current == index) return
            uni.switchTab({
               url
            })
         },


         change(e) {
            console.log(e);
            uni.reLaunch({
               url: this.curTabList[e].url,
               complete: (res) => {
                  console.log("===>", res);
               }
            })
            // this.$emit("change", this.curTabList[e].url)
         },

            this.$emit("change", index)
         }
      }
   }
</script>

<style lang="scss" scoped>
   .tabbar-icon {
      width: 45rpx;
      height: 45rpx;
      width: 56rpx;
      height: 56rpx;
   }
</style>