discounts-minapp/components/zs-tab-bar/index.vue

<template>
  <view>
    <u-tabbar
      :border="false"
      :value="value"
      activeColor="#A10808"
      :placeholder="false"
      :customStyle="barStyle"
      class="tabBar"
      @click="clickBar"
      @change="changBar"
    >
      <u-tabbar-item text="文创">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/taskBar/home_active.png"
        >
        </image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/taskBar/home.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item text="活动">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/taskBar/act_active.png"
        >
        </image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/taskBar/act.png"
        ></image>
      </u-tabbar-item>
      <!-- <u-tabbar-item text="生活">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/taskBar/life_active.png"
        >
        </image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/taskBar/life.png"
        ></image>
      </u-tabbar-item> -->
      <u-tabbar-item text="我的">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/icon/taskBar/my_active.png"
        >
        </image>
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/icon/taskBar/my.png"
        ></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  props:{
	value:{
		type:Number,
		default:0
	}
  },
  data() {
    return {
      barStyle: {
        borderRadius: "32rpx 32rpx 0 0",
        boxShadow: "0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09)",
      },
      list: [
        {
          text: "文创",
          pagePath: "pages/index/index",
        },
        {
          text: "活动",
          pagePath: "pages/activity/index",
        },
        // {
        //   text: "生活",
        //   pagePath: "pages/life/index",
        // },
        {
          text: "我的",
          pagePath: "pages/my/index",
        },
      ],
    };
  },
  methods: {
    changBar(e) {
      uni.switchTab({
        url:"/"+ this.list[e].pagePath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.u-page__item__slot-icon {
  width: 23px;
  height: 23px;
}
</style>