JingTieXueTang.H5/src/views/home/index.vue

<template>
  <div class="home-box">
    <van-nav-bar
      title="京铁学堂"
      left-text=""
      right-text=""
      bind:click-left=""
      bind:click-right=""
    />
    <transition name="tab" mode="out-in">
      <component :is="currentComponents" class="page" />
    </transition>
    <van-tabbar
      v-model="activeTabName"
      active-color="#F2674E"
      inactive-color="#808080"
      @change="onChange"
    >
      <van-tabbar-item v-for="(item, index) in tabbars" :key="index">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.iconActive : item.iconInactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import PageLearn from "./learn/page-learn";
import PageAnswer from "./answer/page-answer";
import PageExam from "./exam/page-exam";
import PagePerson from "./person/page-person";
export default {
  name: "home",
  components: { PageLearn, PageAnswer, PageExam, PagePerson },
  data() {
    return {
      activeTabName: 0,
      currentComponents: "pageLearn",
      tabbars: [
        {
          title: "学习",
          pageName: "pageLearn",
          iconInactive: require("@/assets/image/homeTab/study.png"),
          iconActive: require("@/assets/image/homeTab/studyActive.png")
        },
        {
          title: "答题",
          pageName: "pageAnswer",
          iconInactive: require("@/assets/image/homeTab/answer.png"),
          iconActive: require("@/assets/image/homeTab/answerActive.png")
        },
        {
          title: "考试",
          pageName: "pageExam",
          iconInactive: require("@/assets/image/homeTab/exam.png"),
          iconActive: require("@/assets/image/homeTab/examActive.png")
        },
        {
          title: "我的",
          pageName: "pagePerson",
          iconInactive: require("@/assets/image/homeTab/person.png"),
          iconActive: require("@/assets/image/homeTab/personActive.png")
        }
      ]
    };
  },
  created() {
    this.activeTabName = 2;
    this.currentComponents = this.tabbars[this.activeTabName].pageName;
  },
  methods: {
    onChange(index) {
      this.currentComponents = this.tabbars[this.activeTabName].pageName;
      // if (this.current !== pageName) {
      //   this.current = pageName;
      //   this.$router.replace({ name: "home", query: { page: pageName } });
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.home-box {
  height: 100%; // 不要设置vh，手机浏览器计算问题
  padding-bottom: 2rem; // 多2em，避免tab栏挡住内容
}
</style>