替换练习预览

src/views/exercise_questions/preview/ReplaceAnswerPreview.vue

@@ -13,12 +13,13 @@
             <el-option v-for="items in item" :key="items.content" :label="items.content" :value="items.content">
             </el-option>
           </el-select> -->
-          <span class="select-item selsec-active"></span>
-          <ul @scroll="handleScroll">
+          <span class="select-item selsec-active">{{ active_content[i] }}</span>
+          <ul @scroll="handleScroll($event, i)" class="replace-ul" :ref="'ui' + i">
             <li
               :class="[answer.answer_list[0].select_mark[i] === items.mark ? 'active' : '']"
               v-for="(items, indexs) in item"
               :key="indexs"
+              @click="handleClickItem(i, indexs)"
             >
               {{ items.content }}
             </li>
@@ -54,6 +55,7 @@ export default {
         ],
         option_list: [],
       },
+      active_content: [],
     };
   },
   created() {
@@ -64,6 +66,7 @@ export default {
     // 初始化数据
     handleData() {
       this.option_list = [];
+      this.active_content = [];
       this.answer.answer_list = [
         {
           audio_file_id: '',
@@ -82,12 +85,24 @@ export default {
         if (option_item.length > 0) {
           this.option_list.push(option_item);
           this.answer.answer_list[0].select_mark.push(option_item.length > 1 ? option_item[0].mark : '');
+          this.active_content.push(option_item.length > 1 ? option_item[0].content : '');
         }
       });
     },
     // 处理滚动
-    handleScroll(event) {
-      console.log(event);
+    handleScroll(event, i) {
+      let scrollTop = event.target.scrollTop;
+      let scrollIndex = Math.round(scrollTop / 48);
+      this.active_content[i] = this.option_list[i][scrollIndex].content;
+      this.answer.answer_list[0].select_mark[i] = this.option_list[i][scrollIndex].mark;
+      this.$forceUpdate();
+    },
+    handleClickItem(i, indexs) {
+      console.log(this.$refs['ui' + i][0].scrollTop);
+      this.$refs['ui' + i][0].scrollTop = indexs * 48;
+      this.active_content[i] = this.option_list[i][indexs].content;
+      this.answer.answer_list[0].select_mark[i] = this.option_list[i][indexs].mark;
+      this.$forceUpdate();
     },
   },
 };
@@ -130,6 +145,7 @@ export default {
       width: 100%;
       height: 40px;
       margin-top: -20px;
+      color: rgba(29, 33, 41, 100%);
       background-color: rgba(239, 239, 239, 100%);
     }