ソースを参照

页签左右滚动效果兼容所有环境不依赖behavior

RuoYi 2 ヶ月 前
コミット
9c6ae1dd60
1 ファイル変更26 行追加2 行削除
  1. 26 2
      ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue

+ 26 - 2
ruoyi-ui/src/layout/components/TagsView/ScrollPane.vue

@@ -28,8 +28,32 @@ export default {
   methods: {
     smoothScrollTo(target) {
       const $scrollWrapper = this.scrollWrapper
-      $scrollWrapper.scrollTo({ left: target, behavior: 'smooth' })
-      setTimeout(() => this.$emit('updateArrows'), 350)
+      const start = $scrollWrapper.scrollLeft
+      const distance = target - start
+      const duration = 300
+      let startTime = null
+
+      function ease(t, b, c, d) {
+        t /= d / 2
+        if (t < 1) return c / 2 * t * t + b
+        t--
+        return -c / 2 * (t * (t - 2) - 1) + b
+      }
+
+      const emit = this.$emit.bind(this)
+      function step(timestamp) {
+        if (!startTime) startTime = timestamp
+        const elapsed = timestamp - startTime
+        $scrollWrapper.scrollLeft = ease(elapsed, start, distance, duration)
+        if (elapsed < duration) {
+          requestAnimationFrame(step)
+        } else {
+          $scrollWrapper.scrollLeft = target
+          emit('updateArrows')
+        }
+      }
+
+      requestAnimationFrame(step)
     },
     handleScroll(e) {
       const eventDelta = e.wheelDelta || -e.deltaY * 40