侧面加载音频视频图片时，解决抖动问题

src/components/CommonPreview.vue

@@ -150,8 +150,13 @@
         size="25%"
         :style="drawerStyle"
       >
-        <div class="infinite-list-wrapper" style="overflow: auto">
-          <ul v-infinite-scroll="loadMore" class="scroll-container" infinite-scroll-disabled="disabled">
+        <div class="infinite-list-wrapper">
+          <ul
+            v-infinite-scroll="loadMore"
+            class="scroll-container"
+            infinite-scroll-disabled="disabled"
+            :infinite-scroll-immediate="false"
+          >
             <li
               v-for="(item, index) in file_list"
               :key="index"
@@ -358,7 +363,9 @@ export default {
       cur_page: 1,
       file_list: [],
       total_count: 0,
-      loading: false,
+      loading: true,
+      lastLoadTime: 0,
+      minLoadInterval: 3 * 1000,
       isShowGroup: false,
       groupShowAll: true,
       opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
@@ -381,10 +388,12 @@ export default {
   },
   computed: {
     disabled() {
-      return this.loading || this.noMore;
+      const result = this.loading || this.noMore;
+      return result;
     },
     noMore() {
-      return this.file_list.length >= this.total_count && this.total_count > 0;
+      const result = this.file_list.length >= this.total_count;
+      return result;
     },
   },
   watch: {
@@ -398,6 +407,19 @@ export default {
       this.simulateAnswer();
     },
   },
+  mounted() {
+    console.log('=== 开始诊断无限滚动问题 ===');
+
+    // 检查Element UI是否正确安装
+    console.log('Element UI无限滚动指令:', this.$options.directives?.infiniteScroll);
+
+    // 检查当前元素上的指令
+    console.log('元素上的vue实例:', this.$el.__vue__);
+    console.log('元素上的指令绑定:', this.$el.__vue__?.$options.directives);
+
+    // 检查disabled状态
+    console.log('当前disabled状态:', this.disabled);
+  },
   created() {
     if (this.id) {
       this.getBookCoursewareInfo(this.id);
@@ -644,21 +666,47 @@ export default {
      * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频）
      */
     openDrawer({ type }) {
-      if (this.drawerType === type) {
-        this.drawerType = '';
-        return;
-      }
-      this.drawerType = type;
+      // if (this.drawerType === type) {
+      //   this.drawerType = '';
+      //   return;
+      // }
+      // this.drawerType = type;
+      // this.$nextTick(() => {
+      //   this.cur_page = 1;
+      //   this.file_list = [];
+      //   this.loadMore();
+      // });
+
+      // 重置所有加载状态
+      this.resetLoadState();
+      this.drawerType = type; // 假设这是你的类型变量
       this.$nextTick(() => {
-        this.cur_page = 1;
-        this.file_list = [];
+        // 确保DOM更新后触发加载
         this.loadMore();
       });
     },
     openAudit() {},
+    resetLoadState() {
+      this.cur_page = 1;
+      this.file_list = [];
+      this.total_count = 0;
+      this.loading = false;
+      this.lastLoadTime = 0; // 重置时间戳，允许立即加载
+      this.loadCount = 0;
+    },
     // 加载更多数据
-    loadMore() {
-      if (this.disabled) return;
+    async loadMore() {
+      const now = Date.now();
+      // 只有当lastLoadTime不为0（不是第一次）且时间间隔太短时才return
+      if (this.lastLoadTime > 0 && now - this.lastLoadTime < this.minLoadInterval) {
+        return;
+      }
+
+      if (this.disabled || this.loading) {
+        if (this.lastLoadTime > 0) {
+          return;
+        }
+      }
       this.loading = true;
       const params = {
         page_capacity: this.page_capacity,
@@ -666,16 +714,36 @@ export default {
         book_id: this.projectId,
         type: parseInt(this.drawerType),
       };
-      PageQueryBookResourceList(params)
+      await PageQueryBookResourceList(params)
         .then(({ total_count, resource_list }) => {
           this.total_count = total_count;
+          // 记录加载前的滚动高度
+          const scrollContainer = this.$el.querySelector('.el-drawer__body');
+          const isAtBottom = this.isScrollAtBottom(scrollContainer);
+
           this.file_list = this.cur_page === 1 ? resource_list : [...this.file_list, ...resource_list];
-          this.cur_page += this.cur_page;
+          if (!resource_list || resource_list.length === 0) {
+            return;
+          }
+          this.cur_page += 1;
+
+          // 只有当前已经在底部时才微调滚动位置
+          if (isAtBottom) {
+            this.$nextTick(() => {
+              // 轻微向上滚动，创造滚动空间
+              scrollContainer.scrollTop -= 5;
+            });
+          }
         })
         .finally(() => {
           this.loading = false;
+          this.lastLoadTime = now;
         });
     },
+    isScrollAtBottom(container) {
+      if (!container) return false;
+      return container.scrollHeight - container.scrollTop <= container.clientHeight + 5;
+    },
     async handleFileClick(courseware_id, component_id) {
       if (courseware_id) this.selectNode(courseware_id);
       if (component_id) {
@@ -1103,6 +1171,9 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
   }
 
   .el-drawer__body {
+    height: calc(100vh - 200px);
+    overflow-y: auto;
+
     .scroll-container {
       display: flex;
       flex-direction: column;
@@ -1123,7 +1194,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
         }
 
         :deep .audio-middle {
-          width: calc(25vw - 40px);
+          width: calc(25vw - 110px);
           border: none;
           border-radius: 8px;
         }