yicangzongtai_app_240321/components/entrepreneurship-zone-tabbar/index.vue

<template>
  <!--
		@copyright CYZ
		@time 2022/8/6
		创业专区-导航栏
	 -->
  <view class="main">
    <u-tabbar v-model="current" :list="list" height="55px" activeColor='#FA6138' inactiveColor='#666666' icon-size="55"
      :before-switch="beforeSwitch"></u-tabbar>
  </view>
</template>

<script>
  import imgs from '@/common/img.js';
  export default {
    props: {
      //激活选项的索引
      current: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        list: [
          {
            iconPath: '/static/shop_tabbar_01.png',
            selectedIconPath: '/static/shop_tabbar_01.png',
            text: '宜昌优选',
            url: '/pages/index/lidaPage'
          },
          {
            iconPath: '/static/shop_tabbar_02.png',
            selectedIconPath: '/static/shop_select_tabbar_04.png',
            text: '商品分类',
            url: '/pages/index/list'
          },
          {
            iconPath: '/static/shop_tabbar_03.png',
            selectedIconPath: '/static/shop_select_tabbar_03.png',
            text: '附近门店',
            url: '/pages/nearbyShop/city'
          },
          {
            url: "/pages/index/personal",
            iconPath: '/static/shop_tabbar_04.png',
            selectedIconPath: '/static/shop_select_tabbar_04.png',
            text: "个人中心"
          }
        ]
      }
    },
    methods: {
      beforeSwitch(index) {
        let isOtherPage = index != this.current;
        // console.log(isOtherPage, index, 111)
        if (isOtherPage) {
          uni.redirectTo({
            url: this.list[index].url
          })
        }
        return false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    ::v-deep .u-tabbar {
      .u-tabbar__content__item {

        .u-tabbar__content__item__button {
          .u-icon__img {
            * {
              background-size: 100% 100% !important;
            }
          }
        }

        .u-tabbar__content__item__text {
          bottom: 12rpx;
        }
      }
    }
  }
</style>