fangliaoxiaochengxv/components/tabbar/tabbar.vue

<template>
  <view>

    <u-tabbar :border="true" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="9999"
              :value="current?current:0" activeColor="#C29556" inactiveColor="#AAAFC4" @change="changeTab">
      <u-tabbar-item v-for="(item,index) in list" :key="index" :name="item.id" :text="item.text" style="width: 20%">
        <image slot="active-icon" :src="item.selectedIconPath" class="u-page__item__slot-icon"></image>
        <image slot="inactive-icon" :src="item.iconPath" class="u-page__item__slot-icon-index"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      list: [{
        id: 0,
        // 图片更换成自己的哈
        selectedIconPath: "../../static/ic-shop-b.png",
        iconPath: "../../static/ic-shop-b.png",
        text: '首页',
        pagePath: "pages/home/index"
      },
        {
          id: 1,
          selectedIconPath: "../../static/ic-shop-b.png",
          iconPath: "../../static/ic-shop-b.png",
          text: '服务',
          pagePath: "pages/service/service"
        },
        {
          id: 2,
          pagePath: "pages/activity/activity",
          text: "活动",
          iconPath: "../../static/ic-shop-b.png",
          selectedIconPath: "../../static/ic-shop-b.png"
        },
        {
          id: 3,
          selectedIconPath: "../../static/ic-shop-b.png",
          iconPath: "../../static/ic-shop-b.png",
          text: '购物车',
          pagePath: "pages/shoppingCart/shoppingCart"
        },
        {
          id: 4,
          selectedIconPath: "../../static/ic-shop-b.png",
          iconPath: "../../static/ic-shop-b.png",
          text: '我的',
          pagePath: "pages/mine/index"
        }
      ],
    };
  },
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  mounted() {

    const configs = uni.getStorageSync("configs");
    console.log("getConfigzj=>", configs);
    if (configs) {
      this.list[0].selectedIconPath = configs.menu1_on
      this.list[0].iconPath = configs.menu1_off

      this.list[1].selectedIconPath = configs.menu2_on
      this.list[1].iconPath = configs.menu2_off

      this.list[2].selectedIconPath = configs.menu3_on
      this.list[2].iconPath = configs.menu3_off

      this.list[3].selectedIconPath = configs.menu4_on
      this.list[3].iconPath = configs.menu4_off
      this.list[4].selectedIconPath = configs.menu5_on
      this.list[4].iconPath = configs.menu5_off
    }
  },
  methods: {
    changeTab(e) {

      // 用 switchTab 的前提要在 pages.json中 注册好 tabBar
      //  可以把 switchTab换成其他的跳转(比如:navigateTo) 不过好像页面会闪一下，建议switchTab
      uni.switchTab({
        url: '/' + this.list[e].pagePath,
      })
    }
  }
}
</script>

<style scoped>
.u-page__item__slot-icon {
  width: 58rpx !important;
  height: 58rpx !important;
}

.u-page__item__slot-icon-index {
  width: 58rpx !important;
  height: 58rpx !important;
}
</style>