uni-Identify-quality/components/uiq-tabbar/uiq-tabbar.vue

<template>
  <view class="tabbar">
    <u-tabbar :safeAreaInsetBottom="true" :placeholder="true" :border="false" class="tabbar-ios-fix"  activeColor='#22bf8e' :value="current?current:0" :fixed="true"
                @change="handleTabClick">
      <u-tabbar-item v-for='(item,index) in tabList' :key="index" :text="item.text">
        <image style="width: 52rpx;height: 52rpx;margin-top: 34rpx" slot="inactive-icon" class="u-page__item__slot-icon" :src="item.iconPath">
        </image>
        <image style="width: 52rpx;height: 52rpx;margin-top: 34rpx" slot="active-icon" class="u-page__item__slot-icon" :src="item.selectedIconPath">
        </image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>
<script>
import tabBar from "../../util/tabbar";
export default {
  props: {
    current: Number
  },
  data() {
    return {
      tabList: uni.getStorageSync('tabBar')
    };
  },
  mounted() {

  },
  methods: {
    handleTabClick(index) {
      uni.switchTab({
        url: '/' + this.tabList[index].pagePath,
      });

    },
  }
}
</script>
<style lang="scss">
.u-page__item__slot-icon {
  width: 52rpx;
  height: 52rpx;
}


.tabbar-ios-fix {
  bottom: calc(120rpx + env(safe-area-inset-bottom));
}
</style>