jingcai/components/footer/footer.vue

<template>
  <view class="footer d-flex p-y-xs2 bg-tab-nav fn-center"
    ><!-- p-y-xs -->
    <view
      class="item line-height-1 flex-fill"
      :class="{ 'router-link-active': tab == item.tel }"
      v-for="item in navList"
      :key="item.tel"
      @click="tabChange(item.tel)"
    >
      <view class="icon">
        <img
          class="h-15"
          v-if="tab == item.tel"
          :src="item.activeIcon"
          alt=""
        />
        <img class="h-15" v-else :src="item.icon" alt="" />
      </view>
      <view class="fn-12" style="margin-top: 4px">{{ $t(item.label) }}</view>
    </view>
  </view>
</template>
<script>
import { navList } from "./list.js";
export default {
  props: {
    tab: {
      type: String,
      default: "home",
    },
  },
  data() {
    return {
      navList: navList(this),
    };
  },
  methods: {
    tabChange(v) {
      uni.switchTab({
        url: "/pages/base/" + v,
      });
      // console.log(v);
      // console.log(this.$router);
    },
  },
};
</script>
<style lang="scss" scoped>
.p-y-xs2 {
  padding-top: 25rpx !important;
  padding-bottom: 30rpx !important;
}
.footer {
  box-shadow: $tab-nav-shadow;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999 !important;
   height: 65rpx;
  // color: rgba(#fff, 0.3);
}
.router-link-active {
  color: $theme-1;
  // color: var(--tab-nav-active);
}
.bg-tab-nav{
	// background-color: #31313f;
}
</style>