优化课程列表页滚动效果

src/views/laboratory/ExperimentalCourses.vue

@@ -190,12 +190,17 @@ const handleMouseDown = (e) => {
 // 鼠标移动事件处理函数
 const handleMouseMove = (e) => {
   if (!isDragging.value || !middleBox.value) return
+  // 阻止默认行为，防止文本选择等与拖拽冲突
+  e.preventDefault()
   // 标记已发生移动
   hasMoved.value = true
-  // 计算新的滚动位置
-  const x = e.pageX - middleBox.value.offsetLeft
-  const walk = (x - startX.value) * CONSTANTS.SCROLL_SPEED // 滚动速度
-  middleBox.value.scrollLeft = scrollLeft.value - walk
+  // 优化滚动
+  requestAnimationFrame(() => {
+    // 计算新的滚动位置
+    const x = e.pageX - middleBox.value.offsetLeft
+    const walk = (x - startX.value) * CONSTANTS.SCROLL_SPEED // 滚动速度
+    middleBox.value.scrollLeft = scrollLeft.value - walk
+  })
 }
 
 // 鼠标松开事件处理函数
@@ -301,14 +306,12 @@ onUnmounted(() => {
 
 // 处理课程项点击事件
 const handleCourseItemClick = (item, index) => {
+  // 如果在拖动过程中或移动过，则不触发点击事件
+  if (hasMoved.value || isDragging.value) return
 
   activeButton.value = index
   localStorage.setItem(blocklyActiveButton.value, activeButton.value)
 
-
-  // 如果在拖动过程中或移动过，则不触发点击事件
-  if (hasMoved.value || isDragging.value) return
-
   // 如果是只读模式，不允许点击
   if (isDisabled.value) {
     Message().notifyWarning('您的账号并未开放此课程！', true)
@@ -487,6 +490,10 @@ watch(showVideo, (newValue, oldValue) => {
   cursor: grab; /* 显示可抓取图标 */
   z-index: 2;
   padding: 0 rpx(30);
+  /* 硬件加速 */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
   /* 设置背景图  */
   background-image: url('@/assets/programming/track01.png');
   background-size: rpx(1360) rpx(350); /* 固定宽度,背景图大小一致 */
@@ -524,14 +531,18 @@ watch(showVideo, (newValue, oldValue) => {
   z-index: 2; /* 内容在背景图上方 */
   vertical-align: middle;
   position: relative;
+  /* 硬件加速 */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 /* 奇数项在上层 */
 .slide-item:nth-child(odd) {
-  transform: translateY(-50%);
+  transform: translateY(-50%) translateZ(0);
 }
 /* 偶数项在下层 */
 .slide-item:nth-child(even) {
-  transform: translateY(50%);
+  transform: translateY(50%) translateZ(0);
 }
 /* 鼠标悬停放大效果 */
   .slide-item:nth-child(odd):hover {