优化

package-lock.json

@@ -26,6 +26,7 @@
         "vue3-video-play": "^1.3.1-beta.6"
       },
       "devDependencies": {
+        "@fcli/vue-auto-scroll": "^0.0.2",
         "@vitejs/plugin-vue": "^2.3.3",
         "sass": "^1.64.2",
         "skeleton-loader": "^2.0.0",
@@ -112,6 +113,12 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@fcli/vue-auto-scroll": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/@fcli/vue-auto-scroll/-/vue-auto-scroll-0.0.2.tgz",
+      "integrity": "sha512-qRxCH40ZVWh4NgUBfkL8LoIjo5JhOGeO8uVrCqdcPS1VQh/h/zzSUJRb8mDthY08V3b7bRayPGdzEPT5//HG+Q==",
+      "dev": true
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.4.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "vue3-video-play": "^1.3.1-beta.6"
   },
   "devDependencies": {
+    "@fcli/vue-auto-scroll": "^0.0.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "sass": "^1.64.2",
     "skeleton-loader": "^2.0.0",

public/config.js

@@ -16,5 +16,5 @@ window.g = {
     // UE_IP: "http://192.168.4.159"
     // UE_IP: "http://127.0.0.1:80"
     // UE_IP: "ws://192.168.4.152:81"
-    UE_IP: "ws://192.168.4.148:88"
+    UE_IP: "http://192.168.4.101:81/"
 };

src/components/left.vue

@@ -127,7 +127,7 @@
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item :command="item.leaf" v-for="(item, index) in leafs" :key="index">{{ item.leaf_name
-                    }}</el-dropdown-item>
+                  }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -157,10 +157,10 @@
               height: scrollContainerHeight + 'px',
               overflow: 'hidden',
               paddingTop: '10px',
-            }" v-if="classRoomList.length > 0">
-              <scroll :content="classRoomList" class="vue3-seamless-scroll" :hover="true" :wheel="true" direction="top"
-                ref="scrollRef" :mask="false">
-                <template #default="{ item }">
+            }" v-if="classRoomList.length > 0 && isShhow">
+              <vue-auto-scroll :data="classRoomList" :steep="0.5" scrollDirection="top" :isRoller="true"
+                :rollerScrollDistance="50">
+                <div class="li" v-for="(item, index) in classRoomList" :key="index">
                   <div class="list-item">
                     <div class="class-status-btn-container">
                       <div class="left-class-status">
@@ -197,8 +197,11 @@
                       </div>
                     </div>
                   </div>
-                </template>
-              </scroll>
+                </div>
+
+
+
+              </vue-auto-scroll>
             </div>
 
             <div v-else class="empty-container">
@@ -285,6 +288,7 @@ import Scroll from "./ScrollView.vue";
 // import { callUIInteraction } from "../webrtcVideo";
 import Tag from "./Tag.vue";
 
+
 export default {
   name: "Histogram",
   components: {
@@ -295,6 +299,7 @@ export default {
     ElCarouselItem,
     CircleProgress,
     Tag,
+
     Vue3SeamlessScroll,
     VerticalScroll,
     Scroll,
@@ -303,6 +308,8 @@ export default {
   setup(_, { emit }) {
     // 教室分类统计
     const classRoomCount = ref([]);
+
+    const isShhow = ref(true)
     const generateData = (totalNum, bigvalue, smallvalue, color) => {
       let dataArr = [];
       for (var i = 0; i < totalNum; i++) {
@@ -752,6 +759,7 @@ export default {
     };
     let classRoomList = ref([]);
     const getClassRoomList = async () => {
+      isShhow.value = false;
       let res = await queryClassroom({
         classRoomName: searchData.value,
         category: category.value,
@@ -762,6 +770,7 @@ export default {
       classRoomList.value = [];
       // setTimeout(() => {
       classRoomList.value = res.data;
+      isShhow.value = true;
       // scrollRef.value.reset()
       // }, 0);
     };
@@ -820,7 +829,8 @@ export default {
       offset,
       scrollContainerHeight,
       scrollContainerRef,
-      noData
+      noData,
+      isShhow
     };
   },
 };

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import 'amfe-flexible'
+import VueAutoScroll from '@fcli/vue-auto-scroll';
 // 全局引入弹出框
 // import { ElMessage } from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -19,6 +20,7 @@ const app = createApp(App)
 console.log("全局的app", app)
 app.use(router)
 app.use(vue3videoPlay)
+app.use(VueAutoScroll);
 // app.config.globalProperties.$message = ElMessage;
 // app.use(ElMessage)
 app.mount("#app")