新增首页tab的自定义图标

src/views/home/index.vue

@@ -3,13 +3,17 @@
     <transition name="tab" mode="out-in">
       <component :is="currentComponents" class="page" />
     </transition>
-    <van-tabbar v-model="activeTabName" @change="onChange">
-      <van-tabbar-item
-        v-for="(item, index) in tabbars"
-        :key="index"
-        :icon="item.icon"
-      >
+    <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>
@@ -27,19 +31,38 @@ export default {
     return {
       activeTabName: 0,
       currentComponents: "pageLearn",
-      pageList: ["pageLearn", "pageAnswer", "pageExam", "pagePerson"],
       tabbars: [
-        { title: "学习", icon: "home-o", pageName: "pageLearn" },
-        { title: "答题", icon: "search", pageName: "pageAnswer" },
-        { title: "考试", icon: "setting-o", pageName: "pageExam" },
-        { title: "我的", icon: "contact", pageName: "pagePerson" }
+        {
+          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() { },
+  created() {},
   methods: {
     onChange(index) {
-      this.currentComponents = this.pageList[this.activeTabName];
+      this.currentComponents = this.tabbars[this.activeTabName].pageName;
       // if (this.current !== pageName) {
       //   this.current = pageName;
       //   this.$router.replace({ name: "home", query: { page: pageName } });