uni-admission-fee/components/my-tabbar/my-tabbar.vue

<template>
  <view>
    <u-tabbar :value="current"
              @change="changeTab"
              :fixed="true"
              :placeholder="false"
              :safeAreaInsetBottom="true"
              :border="false"
              activeColor="#FFC748"
              inactiveColor="#1D1D1D">
      <u-tabbar-item v-for="(item,index) in tabBarList"
                     :key="index"
                     :text="item.text">
        <image class="u-page__item__slot-icon"
               slot="inactive-icon"
               :src="item.iconPath"></image>
        <image class="u-page__item__slot-icon"
               slot="active-icon"
               :src="item.selectedIconPath"></image>
      </u-tabbar-item>
    </u-tabbar>

  </view>
</template>

<script>
export default {
  props: {
    currentPage: String
  },
  data () {
    return {
      current: 0,
      tabBarList: [{
        pagePath: "pages/ticket/index",
        iconPath: "../../static/tabbar/icon-ticket.png",
        selectedIconPath: "../../static/tabbar/icon-ticket-active.png",
        text: '场馆',
        customIcon: false,
      },
      {
        pagePath: "pages/my/my",
        iconPath: "../../static/tabbar/icon-mine.png",
        selectedIconPath: "../../static/tabbar/icon-mine-active.png",
        text: '我的',
        customIcon: false,
      }
      ]
    };
  },
  methods: {
    changeTab (e) {
      let page = '/' + this.tabBarList[e].pagePath
      console.log(page);
      uni.switchTab({
        url: page,
        success: () => {
        },
        fail: (e) => {
          console.log(e);
        }
      })
    }
  },
  created () {
    //隐藏原生tabbar
    uni.hideTabBar();
    // 当前选中的菜单
    this.tabBarList.forEach((i, index) => {
      if (i.pagePath == this.currentPage) {
        this.current = index
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
  width: 76rpx;
  height: 76rpx;
}

.u-tabbar /deep/ .u-tabbar--fixed {
  width: 100%;
  height: 88rpx;
  padding: 20px 0;
  background: #ffffff;
}
</style>