sync

src/views/exam/hospitalFinalExam/components/List.vue

 <template>
   <div class="root">
-    <van-search v-model="value" placeholder="请输入搜索关键词" />
+    <van-search  placeholder="请输入搜索关键词" />
     <div class="list">
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <div class="item" v-for="(item,index) in list" :key="index">
+      <van-list v-model="loading"  :finished="listFinished" finished-text="没有更多了" @load="handleLoad">
+        <div class="item" v-for="(item) in dataSouce" :key="item.id">
           <img src="@/assets/images/exam1.png" />
           <div class="right">
             <div class="title">{{item.title}}</div>
             <div class="action">
               <div class="like flex-space-around">
-                <van-icon name="like" size="24" :color="item.like===0? '#ff7b7b':'#cccccc'" />
+                <van-icon
+                  name="like"
+                  size="24"
+                  :color="item.like===0? '#ff7b7b':'#cccccc'"
+                  @click="handelLike(item.id)"
+                />
                 <div class="label">收藏</div>
               </div>
               <div class="share flex-space-around">
-                <van-icon name="share" size="24" color="#cccccc" />
+                <van-icon name="share" size="24" color="#cccccc" @click="handleShare(item.id)" />
                 <div class="label">分享</div>
               </div>
               <div class="answer">
@@ -28,34 +33,47 @@
 </template>
 <script>
 export default {
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    finished: {
+      default: false
+    },
+    list: {
+      default: []
+    },
+    onLoad:Function
+  },
   data() {
     return {
-      list: [],
-      loading: false,
-      finished: false
+     listLoading:this.loading,
+     listFinished:this.finished,
+     dataSouce:this.list
     };
   },
   methods: {
-    onLoad() {
-      // 异步更新数据
-      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-      setTimeout(() => {
-        for (let i = 0; i < 10; i++) {
-          this.list.push({
-            id: i,
-            like: i % 3 === 0 ? 1 : 0,
-            title: "2020版中西医结合执业助理医师 模拟试"
-          });
+    handleLoad(e) {
+      this.onLoad(e)
+    },
+    // 处理收藏
+    handleLike(id) {
+      const index = this.dataSource.findIndex(value => value === id);
+      if (index > -1) {
+        return
       }
-
-        // 加载状态结束
-        this.loading = false;
-
-        // 数据全部加载完成
-        if (this.list.length >= 40) {
-          this.finished = true;
+    },
+    // 处理分享
+    handleShare(id) {
+      const index = this.dataSource.findIndex(value => value === id);
+      if (index > -1) {
+        return
       }
-      }, 1000);
     }
   }
 };
@@ -77,7 +95,7 @@ export default {
       display: flex;
       margin: 0 8px 24px;
 
-justify-content: space-between;
+      justify-content: space-between;
       img {
         height: 92px;
         width: 120px;

src/views/exam/hospitalFinalExam/index.vue

@@ -26,7 +26,7 @@ export default {
   },
   data() {
     return {
-      active: 2
+      active: 0
     };
   }
 };

src/views/exam/hospitalFinalExam/list/Basic.vue

 <template>
   <div class="root">
-    <List></List>
+    <List :list="list" :loading="loading" :finished="finished" :onLoad="loadData"></List>
   </div>
 </template>
 <script>
@@ -8,6 +8,41 @@ import List from "../components/List";
 export default {
   components: {
     List
+  },
+  data() {
+    return {
+      list:[],
+      loading:false,
+      finished:false
+    };
+  },
+  created() {
+    // 加载数据
+    // this.loadData();
+  },
+  methods: {
+    // 加载数据
+    loadData: function(){
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 3; i++) {
+          this.list.push({
+            id: i,
+            like: i % 3 === 0 ? 1 : 0,
+            title: "2020版中西医结合执业助理医师 模拟试"
+          });
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    }
   }
 };
 </script>