style(components): canonical code

src/components/ReSeamlessScroll/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reSeamlessScroll from "./src/index.vue";
+
+export const ReSeamlessScroll = Object.assign(reSeamlessScroll, {
+  install(app: App) {
+    app.component(reSeamlessScroll.name, reSeamlessScroll);
+  },
+});
+
+export default ReSeamlessScroll;

src/components/ReSeamlessScroll/src/index.vue

@@ -0,0 +1,580 @@
+<template>
+  <div :ref="'wrap' + classOption['key']">
+    <div :style="leftSwitch" v-if="navigation" :class="leftSwitchClass" @click="leftSwitchClick">
+      <slot name="left-switch"></slot>
+    </div>
+    <div :style="rightSwitch" v-if="navigation" :class="rightSwitchClass" @click="rightSwitchClick">
+      <slot name="right-switch"></slot>
+    </div>
+    <div
+      :ref="'realBox'+ classOption['key']"
+      :style="pos"
+      @mouseenter="enter"
+      @mouseleave="leave"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+      @touchend="touchEnd"
+      @mousewheel="wheel"
+    >
+      <div :ref="'slotList'+ classOption['key']" :style="float">
+        <slot></slot>
+      </div>
+      <div v-html="copyHtml" :style="float"></div>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import {
+  defineComponent,
+  computed,
+  ref,
+  unref,
+  watchEffect,
+  nextTick
+} from "vue";
+import {
+  tryOnMounted,
+  tryOnUnmounted,
+  templateRef,
+  useDebounceFn
+} from "@vueuse/core";
+import * as utilsMethods from "./utils";
+const { animationFrame, copyObj } = utilsMethods;
+animationFrame();
+
+export default defineComponent({
+  name: "SeamlessScroll",
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    classOption: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  emits: ["ScrollEnd"],
+  setup(props, { emit }) {
+    let xPos = ref(0);
+    let yPos = ref(0);
+    let delay = ref(0);
+    let copyHtml = ref("");
+    let height = ref(0);
+    // 外容器宽度
+    let width = ref(0);
+    // 内容实际宽度
+    let realBoxWidth = ref(0);
+    let realBoxHeight = ref(0);
+
+    // single 单步滚动的定时器
+    let singleWaitTime = null;
+    // move动画的animationFrame定时器
+    let reqFrame = null;
+    let startPos = null;
+    //记录touchStart时候的posY
+    let startPosY = null;
+    //记录touchStart时候的posX
+    let startPosX = null;
+    // mouseenter mouseleave 控制scrollMove()的开关
+    let isHover = false;
+    let ease = "ease-in";
+
+    let { data, classOption } = props;
+
+    if (classOption["key"] === undefined) {
+      classOption["key"] = 0;
+    }
+
+    const wrap = templateRef<HTMLElement | null>(
+      `wrap${classOption["key"]}`,
+      null
+    );
+    const slotList = templateRef<HTMLElement | null>(
+      `slotList${classOption["key"]}`,
+      null
+    );
+    const realBox = templateRef<HTMLElement | null>(
+      `realBox${classOption["key"]}`,
+      null
+    );
+
+    let leftSwitchState = computed(() => {
+      return unref(xPos) < 0;
+    });
+
+    let rightSwitchState = computed(() => {
+      return Math.abs(unref(xPos)) < unref(realBoxWidth) - unref(width);
+    });
+
+    let defaultOption = computed(() => {
+      return {
+        //步长
+        step: 1,
+        //启动无缝滚动最小数据数
+        limitMoveNum: 5,
+        //是否启用鼠标hover控制
+        hoverStop: true,
+        // bottom 往下 top 往上(默认) left 向左 right 向右
+        direction: "top",
+        //开启移动端touch
+        openTouch: true,
+        //单条数据高度有值hoverStop关闭
+        singleHeight: 0,
+        //单条数据宽度有值hoverStop关闭
+        singleWidth: 0,
+        //单步停止等待时间
+        waitTime: 1000,
+        switchOffset: 30,
+        autoPlay: true,
+        navigation: false,
+        switchSingleStep: 134,
+        switchDelay: 400,
+        switchDisabledClass: "disabled",
+        // singleWidth/singleHeight 是否开启rem度量
+        isSingleRemUnit: false
+      };
+    });
+
+    let options = computed(() => {
+      // @ts-ignore
+      return copyObj({}, unref(defaultOption), classOption);
+    });
+
+    let leftSwitchClass = computed(() => {
+      return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
+    });
+
+    let rightSwitchClass = computed(() => {
+      return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
+    });
+
+    let leftSwitch = computed(() => {
+      return {
+        position: "absolute",
+        margin: `${unref(height) / 2}px 0 0 -${unref(options).switchOffset}px`,
+        transform: "translate(-100%,-50%)"
+      };
+    });
+
+    let rightSwitch = computed(() => {
+      return {
+        position: "absolute",
+        margin: `${unref(height) / 2}px 0 0 ${unref(width) +
+          unref(options).switchOffset}px`,
+        transform: "translateY(-50%)"
+      };
+    });
+
+    let isHorizontal = computed(() => {
+      return (
+        unref(options).direction !== "bottom" &&
+        unref(options).direction !== "top"
+      );
+    });
+
+    let float = computed(() => {
+      return unref(isHorizontal)
+        ? { float: "left", overflow: "hidden" }
+        : { overflow: "hidden" };
+    });
+
+    let pos = computed(() => {
+      return {
+        transform: `translate(${unref(xPos)}px,${unref(yPos)}px)`,
+        transition: `all ${ease} ${unref(delay)}ms`,
+        overflow: "hidden"
+      };
+    });
+
+    let navigation = computed(() => {
+      return unref(options).navigation;
+    });
+
+    let autoPlay = computed(() => {
+      if (unref(navigation)) return false;
+      return unref(options).autoPlay;
+    });
+
+    let scrollSwitch = computed(() => {
+      // 从 props 解构出来的 属性 不再具有相应性.
+      return props.data.length >= unref(options).limitMoveNum;
+    });
+
+    let hoverStopSwitch = computed(() => {
+      return unref(options).hoverStop && unref(autoPlay) && unref(scrollSwitch);
+    });
+
+    let canTouchScroll = computed(() => {
+      return unref(options).openTouch;
+    });
+
+    let baseFontSize = computed(() => {
+      return unref(options).isSingleRemUnit
+        ? parseInt(
+            window.getComputedStyle(document.documentElement, null).fontSize
+          )
+        : 1;
+    });
+
+    let realSingleStopWidth = computed(() => {
+      return unref(options).singleWidth * unref(baseFontSize);
+    });
+
+    let realSingleStopHeight = computed(() => {
+      return unref(options).singleHeight * unref(baseFontSize);
+    });
+
+    let step = computed(() => {
+      let singleStep;
+      let step = unref(options).step;
+      if (unref(isHorizontal)) {
+        singleStep = unref(realSingleStopWidth);
+      } else {
+        singleStep = unref(realSingleStopHeight);
+      }
+      if (singleStep > 0 && singleStep % step > 0) {
+        throw "如果设置了单步滚动，step需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确";
+      }
+      return step;
+    });
+
+    function reset() {
+      xPos.value = 0;
+      yPos.value = 0;
+      scrollCancle();
+      scrollInitMove();
+    }
+
+    function leftSwitchClick() {
+      if (!unref(leftSwitchState)) return;
+      // 小于单步距离
+      if (Math.abs(unref(xPos)) < unref(options).switchSingleStep) {
+        xPos.value = 0;
+        return;
+      }
+      xPos.value += unref(options).switchSingleStep;
+    }
+
+    function rightSwitchClick() {
+      if (!unref(rightSwitchState)) return;
+      // 小于单步距离
+      if (
+        unref(realBoxWidth) - unref(width) + unref(xPos) <
+        unref(options).switchSingleStep
+      ) {
+        xPos.value = unref(width) - unref(realBoxWidth);
+        return;
+      }
+      xPos.value -= unref(options).switchSingleStep;
+    }
+
+    function scrollCancle() {
+      cancelAnimationFrame(reqFrame || "");
+    }
+
+    function touchStart(e) {
+      if (!unref(canTouchScroll)) return;
+      let timer;
+      //touches数组对象获得屏幕上所有的touch，取第一个touch
+      const touch = e.targetTouches[0];
+      const { waitTime, singleHeight, singleWidth } = unref(options);
+      //取第一个touch的坐标值
+      startPos = {
+        x: touch.pageX,
+        y: touch.pageY
+      };
+      //记录touchStart时候的posY
+      startPosY = unref(yPos);
+      //记录touchStart时候的posX
+      startPosX = unref(xPos);
+      if (!!singleHeight && !!singleWidth) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          scrollCancle();
+        }, waitTime + 20);
+      } else {
+        scrollCancle();
+      }
+    }
+
+    function touchMove(e) {
+      //当屏幕有多个touch或者页面被缩放过，就不执行move操作
+      if (
+        !unref(canTouchScroll) ||
+        e.targetTouches.length > 1 ||
+        (e.scale && e.scale !== 1)
+      )
+        return;
+      const touch = e.targetTouches[0];
+      const { direction } = unref(options);
+      let endPos = {
+        x: touch.pageX - startPos.x,
+        y: touch.pageY - startPos.y
+      };
+      //阻止触摸事件的默认行为，即阻止滚屏
+      e.preventDefault();
+      //dir，1表示纵向滑动，0为横向滑动
+      const dir = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0;
+      if (
+        (dir === 1 && direction === "bottom") ||
+        (dir === 1 && direction === "top")
+      ) {
+        // 表示纵向滑动 && 运动方向为上下
+        yPos.value = startPosY + endPos.y;
+      } else if (
+        (dir === 0 && direction === "left") ||
+        (dir === 0 && direction === "right")
+      ) {
+        // 为横向滑动 && 运动方向为左右
+        xPos.value = startPosX + endPos.x;
+      }
+    }
+
+    function touchEnd() {
+      if (!unref(canTouchScroll)) return;
+      let timer;
+      const direction = unref(options).direction;
+      delay.value = 50;
+      if (direction === "top") {
+        if (unref(yPos) > 0) yPos.value = 0;
+      } else if (direction === "bottom") {
+        let h = (unref(realBoxHeight) / 2) * -1;
+        if (unref(yPos) < h) yPos.value = h;
+      } else if (direction === "left") {
+        if (unref(xPos) > 0) xPos.value = 0;
+      } else if (direction === "right") {
+        let w = unref(realBoxWidth) * -1;
+        if (unref(xPos) < w) xPos.value = w;
+      }
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        delay.value = 0;
+        scrollMove();
+      }, unref(delay));
+    }
+
+    function enter() {
+      if (unref(hoverStopSwitch)) scrollStopMove();
+    }
+
+    function leave() {
+      if (unref(hoverStopSwitch)) scrollStartMove();
+    }
+
+    function scrollMove() {
+      // 鼠标移入时拦截scrollMove()
+      if (isHover) return;
+      //进入move立即先清除动画 防止频繁touchMove导致多动画同时进行
+      // scrollCancle();
+      reqFrame = requestAnimationFrame(function() {
+        //实际高度
+        const h = unref(realBoxHeight) / 2;
+        //宽度
+        const w = unref(realBoxWidth) / 2;
+        let { direction, waitTime } = unref(options);
+        if (direction === "top") {
+          // 上
+          if (Math.abs(unref(yPos)) >= h) {
+            emit("ScrollEnd");
+            yPos.value = 0;
+          }
+          yPos.value -= step.value;
+        } else if (direction === "bottom") {
+          // 下
+          if (unref(yPos) >= 0) {
+            emit("ScrollEnd");
+            yPos.value = h * -1;
+          }
+          yPos.value += step.value;
+        } else if (direction === "left") {
+          // 左
+          if (Math.abs(unref(xPos)) >= w) {
+            emit("ScrollEnd");
+            xPos.value = 0;
+          }
+          xPos.value -= step.value;
+        } else if (direction === "right") {
+          // 右
+          if (unref(xPos) >= 0) {
+            emit("ScrollEnd");
+            xPos.value = w * -1;
+          }
+          xPos.value += step.value;
+        }
+        if (singleWaitTime) clearTimeout(singleWaitTime);
+        if (!!unref(realSingleStopHeight)) {
+          //是否启动了单行暂停配置
+          if (
+            Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
+            unref(step)
+          ) {
+            // 符合条件暂停waitTime
+            singleWaitTime = setTimeout(() => {
+              scrollMove();
+            }, waitTime);
+          } else {
+            scrollMove();
+          }
+        } else if (!!unref(realSingleStopWidth)) {
+          if (
+            Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
+            unref(step)
+          ) {
+            // 符合条件暂停waitTime
+            singleWaitTime = setTimeout(() => {
+              scrollMove();
+            }, waitTime);
+          } else {
+            scrollMove();
+          }
+        } else {
+          scrollMove();
+        }
+      });
+    }
+
+    function scrollInitMove() {
+      nextTick(() => {
+        const { switchDelay } = unref(options);
+        //清空copy
+        copyHtml.value = "";
+        if (unref(isHorizontal)) {
+          height.value = unref(wrap).offsetHeight;
+          width.value = unref(wrap).offsetWidth;
+          let slotListWidth = unref(slotList).offsetWidth;
+          // 水平滚动设置warp width
+          if (unref(autoPlay)) {
+            // 修正offsetWidth四舍五入
+            slotListWidth = slotListWidth * 2 + 1;
+          }
+          unref(realBox).style.width = slotListWidth + "px";
+          realBoxWidth.value = slotListWidth;
+        }
+
+        if (unref(autoPlay)) {
+          ease = "ease-in";
+          delay.value = 0;
+        } else {
+          ease = "linear";
+          delay.value = switchDelay;
+          return;
+        }
+
+        // 是否可以滚动判断
+        if (unref(scrollSwitch)) {
+          let timer;
+          if (timer) clearTimeout(timer);
+          copyHtml.value = unref(slotList).innerHTML;
+          setTimeout(() => {
+            realBoxHeight.value = unref(realBox).offsetHeight;
+            scrollMove();
+          }, 0);
+        } else {
+          scrollCancle();
+          yPos.value = xPos.value = 0;
+        }
+      });
+    }
+
+    function scrollStartMove() {
+      //开启scrollMove
+      isHover = false;
+      scrollMove();
+    }
+
+    function scrollStopMove() {
+      //关闭scrollMove
+      isHover = true;
+      // 防止频频hover进出单步滚动,导致定时器乱掉
+      if (singleWaitTime) clearTimeout(singleWaitTime);
+      scrollCancle();
+    }
+
+    // watchEffect(() => {
+    //   const watchData = data;
+    //   if (!watchData) return;
+    //   nextTick(() => {
+    //     reset();
+    //   });
+
+    //   const watchAutoPlay = unref(autoPlay);
+    //   if (watchAutoPlay) {
+    //     reset();
+    //   } else {
+    //     scrollStopMove();
+    //   }
+    // });
+
+    // 鼠标滚轮事件
+    function wheel(e) {
+      e.preventDefault();
+      if (
+        unref(options).direction === "left" ||
+        unref(options).direction === "right"
+      )
+        return;
+      useDebounceFn(() => {
+        e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
+      }, 50)();
+    }
+
+    tryOnMounted(() => {
+      scrollInitMove();
+    });
+
+    tryOnUnmounted(() => {
+      scrollCancle();
+      clearTimeout(singleWaitTime);
+    });
+
+    return {
+      xPos,
+      yPos,
+      delay,
+      copyHtml,
+      height,
+      width,
+      realBoxWidth,
+      leftSwitchState,
+      rightSwitchState,
+      options,
+      leftSwitchClass,
+      rightSwitchClass,
+      leftSwitch,
+      rightSwitch,
+      isHorizontal,
+      float,
+      pos,
+      navigation,
+      autoPlay,
+      scrollSwitch,
+      hoverStopSwitch,
+      canTouchScroll,
+      baseFontSize,
+      realSingleStopWidth,
+      realSingleStopHeight,
+      step,
+      reset,
+      leftSwitchClick,
+      rightSwitchClick,
+      scrollCancle,
+      touchStart,
+      touchMove,
+      touchEnd,
+      enter,
+      leave,
+      scrollMove,
+      scrollInitMove,
+      scrollStartMove,
+      scrollStopMove,
+      wheel
+    };
+  }
+});
+</script>

src/components/ReSeamlessScroll/src/utils.ts

@@ -0,0 +1,108 @@
+/**
+ * @desc AnimationFrame简单兼容hack
+ */
+export const animationFrame = () => {
+  window.cancelAnimationFrame = (function () {
+    return window.cancelAnimationFrame ||
+      window.webkitCancelAnimationFrame ||
+      window.mozCancelAnimationFrame ||
+      window.oCancelAnimationFrame ||
+      window.msCancelAnimationFrame ||
+      function (id) {
+        return window.clearTimeout(id)
+      }
+  })()
+  window.requestAnimationFrame = function () {
+    return (
+      window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.oRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      function (callback) {
+        return window.setTimeout(callback, 1000 / 60)
+      }
+    )
+  }()
+}
+
+/**
+ * @desc 判断数组是否相等
+ * @param {arr1,arr2}
+ * @return {Boolean}
+ */
+export const arrayEqual = (arr1: Array<any>, arr2: Array<any>) => {
+  if (arr1 === arr2) return true
+  if (arr1.length !== arr2.length) return false
+  for (let i = 0; i < arr1.length; ++i) {
+    if (arr1[i] !== arr2[i]) return false
+  }
+  return true
+}
+
+/**
+ * @desc 深浅合并拷贝
+ */
+export function copyObj() {
+  if (!Array.isArray) {
+    // @ts-expect-error
+    Array.isArray = function (arg) {
+      return Object.prototype.toString.call(arg) === '[object Array]'
+    }
+  }
+  let name, options, src, copy, copyIsArray, clone,
+    i = 1,
+    target = arguments[0] || {}, // 使用||运算符，排除隐式强制类型转换为false的数据类型
+    deep = false,
+    len = arguments.length
+  if (typeof target === 'boolean') {
+    deep = target
+    target = arguments[1] || {}
+    i++
+  }
+  if (typeof target !== 'object' && typeof target !== 'function') {
+    target = {}
+  }
+  // 如果arguments.length === 1 或typeof arguments[0] === 'boolean',且存在arguments[1]，则直接返回target对象
+  if (i === len) {
+    return target
+  }
+  for (; i < len; i++) {
+    //所以如果源对象中数据类型为Undefined或Null那么就会跳过本次循环，接着循环下一个源对象
+    if ((options = arguments[i]) != null) {
+      // 如果遇到源对象的数据类型为Boolean, Number for in循环会被跳过，不执行for in循环// src用于判断target对象是否存在name属性
+      for (name in options) {
+        // src用于判断target对象是否存在name属性
+        src = target[name]
+        // 需要复制的属性当前源对象的name属性
+        copy = options[name]
+        // 判断copy是否是数组
+        copyIsArray = Array.isArray(copy)
+        // 如果是深复制且copy是一个对象或数组则需要递归直到copy成为一个基本数据类型为止
+        if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
+          if (copyIsArray) {
+            copyIsArray = false
+            // 如果目标对象存在name属性且是一个数组
+            // 则使用目标对象的name属性，否则重新创建一个数组，用于复制
+            clone = src && Array.isArray(src) ? src : []
+          } else {
+            // 如果目标对象存在name属性且是一个对象则使用目标对象的name属性，否则重新创建一个对象，用于复制
+            clone = src && typeof src === 'object' ? src : {}
+          }
+          // 深复制，所以递归调用copyObject函数
+          // 返回值为target对象，即clone对象
+          // copy是一个源对象
+          // @ts-expect-error
+          target[name] = copyObj(deep, clone, copy)
+        } else if (copy !== undefined) {
+          // 浅复制，直接复制到target对象上
+          target[name] = copy
+        }
+      }
+    }
+  }
+  return target
+}
+
+
+