<script setup lang="ts">
|
import {
|
computed,
|
defineComponent,
|
onBeforeMount,
|
onMounted,
|
ref,
|
watch,
|
nextTick,
|
} from "vue";
|
import type { CSSProperties } from "vue";
|
import throttle from "lodash/throttle";
|
type propsType = {
|
modelValue?: boolean;
|
list: Array<any>;
|
step?: number;
|
limitScrollNum?: number;
|
hover?: boolean;
|
direction?: string;
|
singleHeight?: number;
|
singleWidth?: number;
|
singleWaitTime?: number;
|
isRemUnit?: boolean;
|
isWatch?: boolean;
|
delay?: number;
|
ease?: any;
|
count?: number;
|
copyNum?: number;
|
wheel?: boolean;
|
singleLine?: boolean;
|
};
|
const props = withDefaults(defineProps<propsType>(), {
|
// 是否开启自动滚动
|
modelValue: true,
|
// 原始数据列表
|
list: () => [],
|
// 步进速度，step 需是单步大小的约数
|
step: 1,
|
// 开启滚动的数据量
|
limitScrollNum: 3,
|
// 是否开启鼠标悬停
|
hover: false,
|
// 控制滚动方向
|
direction: "up",
|
// 单步运动停止的高度
|
singleHeight: 0,
|
// 单步运动停止的宽度
|
singleWidth: 0,
|
// 单步停止等待时间 (默认值 1000ms)
|
singleWaitTime: 1000,
|
// 是否开启 rem 度量
|
isRemUnit: false,
|
// 开启数据更新监听
|
isWatch: true,
|
// 动画时间
|
delay: 0,
|
// 动画方式
|
ease: "ease-in",
|
// 动画循环次数，-1 表示一直动画
|
count: -1,
|
// 拷贝几份滚动列表
|
copyNum: 1,
|
// 开启鼠标悬停时支持滚轮滚动
|
wheel: false,
|
// 启用单行滚动
|
singleLine: false,
|
});
|
interface Emits {
|
(event: "count", _count: number): void;
|
(event: "stop", _count: number): void;
|
}
|
const emit = defineEmits<Emits>();
|
const scrollRef = ref(null);
|
const slotListRef = ref<HTMLDivElement | null>(null);
|
const realBoxRef = ref<HTMLDivElement | null>(null);
|
const reqFrame = ref<number | null>(null);
|
const singleWaitTimeout = ref<TimeProp | null>(null);
|
const realBoxWidth = ref(0);
|
const realBoxHeight = ref(0);
|
const xPos = ref(0);
|
const yPos = ref(0);
|
const isHover = ref(false);
|
const _count = ref(0);
|
const isScroll = computed(() =>
|
props.list ? props.list.length >= props.limitScrollNum : false
|
);
|
const realBoxStyle = computed(() => {
|
return {
|
width: realBoxWidth.value ? `${realBoxWidth.value}px` : "auto",
|
transform: `translate(${xPos.value}px,${yPos.value}px)`,
|
transition: `all ${
|
typeof props.ease === "string"
|
? props.ease
|
: "cubic-bezier(" +
|
props.ease.x1 +
|
"," +
|
props.ease.y1 +
|
"," +
|
props.ease.x2 +
|
"," +
|
props.ease.y2 +
|
")"
|
} ${props.delay}ms`,
|
overflow: "hidden",
|
display: props.singleLine ? "flex" : "block",
|
};
|
});
|
const isHorizontal = computed(
|
() => props.direction == "left" || props.direction == "right"
|
);
|
|
function dataWarm(list: any) {
|
if (list && typeof list !== "boolean" && list.length > 100) {
|
console.warn(
|
`数据达到了${list.length}条有点多哦~,可能会造成部分老旧浏览器卡顿。`
|
);
|
}
|
}
|
const floatStyle = computed<CSSProperties>(() => {
|
return isHorizontal.value
|
? {
|
float: "left",
|
overflow: "hidden",
|
display: props.singleLine ? "flex" : "block",
|
flexShrink: props.singleLine ? 0 : 1,
|
}
|
: { overflow: "hidden" };
|
});
|
const baseFontSize = computed(() => {
|
return props.isRemUnit
|
? parseInt(
|
globalThis.window.getComputedStyle(
|
globalThis.document.documentElement,
|
null
|
).fontSize
|
)
|
: 1;
|
});
|
const realSingleStopWidth = computed(
|
() => props.singleWidth * baseFontSize.value
|
);
|
|
const realSingleStopHeight = computed(
|
() => props.singleHeight * baseFontSize.value
|
);
|
|
const step = computed(() => {
|
let singleStep: number;
|
let _step = props.step;
|
if (isHorizontal.value) {
|
singleStep = realSingleStopWidth.value;
|
} else {
|
singleStep = realSingleStopHeight.value;
|
}
|
if (singleStep > 0 && singleStep % _step > 0) {
|
console.error(
|
"如果设置了单步滚动，step 需是单步大小的约数，否则无法保证单步滚动结束的位置是否准确。~~~~~"
|
);
|
}
|
return _step;
|
});
|
|
const cancle = () => {
|
cancelAnimationFrame(reqFrame.value as number);
|
reqFrame.value = null;
|
};
|
const animation = (
|
_direction: "up" | "down" | "left" | "right",
|
_step: number,
|
isWheel?: boolean
|
) => {
|
// console.log("animation",_direction,_step,isWheel);
|
reqFrame.value = requestAnimationFrame(function () {
|
const h = realBoxHeight.value / 2;
|
const w = realBoxWidth.value / 2;
|
if (_direction === "up") {
|
if (Math.abs(yPos.value) >= h) {
|
yPos.value = 0;
|
_count.value += 1;
|
emit("count", _count.value);
|
}
|
yPos.value -= _step;
|
} else if (_direction === "down") {
|
if (yPos.value >= 0) {
|
yPos.value = h * -1;
|
_count.value += 1;
|
emit("count", _count.value);
|
}
|
yPos.value += _step;
|
} else if (_direction === "left") {
|
if (Math.abs(xPos.value) >= w) {
|
xPos.value = 0;
|
_count.value += 1;
|
emit("count", _count.value);
|
}
|
xPos.value -= _step;
|
} else if (_direction === "right") {
|
if (xPos.value >= 0) {
|
xPos.value = w * -1;
|
_count.value += 1;
|
emit("count", _count.value);
|
}
|
xPos.value += _step;
|
}
|
if (isWheel) {
|
return;
|
}
|
let { singleWaitTime } = props;
|
if (singleWaitTimeout.value) {
|
clearTimeout(singleWaitTimeout.value);
|
}
|
if (!!realSingleStopHeight.value) {
|
if (Math.abs(yPos.value) % realSingleStopHeight.value < _step) {
|
singleWaitTimeout.value = setTimeout(() => {
|
move();
|
}, singleWaitTime);
|
} else {
|
move();
|
}
|
} else if (!!realSingleStopWidth.value) {
|
if (Math.abs(xPos.value) % realSingleStopWidth.value < _step) {
|
singleWaitTimeout.value = setTimeout(() => {
|
move();
|
}, singleWaitTime);
|
} else {
|
move();
|
}
|
} else {
|
move();
|
}
|
});
|
};
|
const move = () => {
|
cancle();
|
if (isHover.value || !isScroll.value || _count.value === props.count) {
|
emit("stop", _count.value);
|
_count.value = 0;
|
return;
|
}
|
animation(
|
props.direction as "up" | "down" | "left" | "right",
|
step.value,
|
false
|
);
|
};
|
const initMove = () => {
|
dataWarm(props.list);
|
if (isHorizontal.value) {
|
let slotListWidth = (slotListRef.value as HTMLDivElement).offsetWidth;
|
slotListWidth = slotListWidth * 2 + 1;
|
realBoxWidth.value = slotListWidth;
|
}
|
if (isScroll.value) {
|
realBoxHeight.value = (realBoxRef.value as HTMLDivElement).offsetHeight;
|
if (props.modelValue) {
|
move();
|
}
|
} else {
|
cancle();
|
yPos.value = xPos.value = 0;
|
}
|
// console.log("initMove","isHorizontal",isHorizontal.value,"isScroll",isScroll.value,realBoxRef.value?.offsetHeight);
|
};
|
const startMove = () => {
|
isHover.value = false;
|
move();
|
};
|
|
const stopMove = () => {
|
isHover.value = true;
|
if (singleWaitTimeout.value) {
|
clearTimeout(singleWaitTimeout.value);
|
}
|
cancle();
|
};
|
|
const hoverStop = computed(
|
() => props.hover && props.modelValue && isScroll.value
|
);
|
const throttleFunc = throttle((e: WheelEvent) => {
|
cancle();
|
const singleHeight = !!realSingleStopHeight.value
|
? realSingleStopHeight.value
|
: 15;
|
if (e.deltaY < 0) {
|
animation("down", singleHeight, true);
|
}
|
if (e.deltaY > 0) {
|
animation("up", singleHeight, true);
|
}
|
}, 30);
|
|
const onWheel = (e: WheelEvent) => {
|
throttleFunc(e);
|
};
|
const reset = () => {
|
cancle();
|
isHover.value = false;
|
initMove();
|
};
|
const Reset = () => {
|
reset();
|
};
|
defineExpose({
|
Reset,
|
});
|
|
watch(
|
() => props.list,
|
() => {
|
if (props.isWatch) {
|
nextTick(() => {
|
reset();
|
});
|
}
|
},
|
{
|
deep: true,
|
}
|
);
|
|
watch(
|
() => props.modelValue,
|
(newValue) => {
|
if (newValue) {
|
startMove();
|
} else {
|
stopMove();
|
}
|
}
|
);
|
|
watch(
|
() => props.count,
|
(newValue) => {
|
if (newValue !== 0) {
|
startMove();
|
}
|
}
|
);
|
|
onBeforeMount(() => {
|
cancle();
|
clearTimeout(singleWaitTimeout.value as unknown as number);
|
});
|
|
onMounted(() => {
|
if (isScroll.value) {
|
initMove();
|
}
|
});
|
</script>
|
|
<template>
|
<div
|
v-if="props.wheel && props.hover"
|
ref="realBoxRef"
|
:style="realBoxStyle"
|
@mouseenter="
|
() => {
|
hoverStop && stopMove();
|
}
|
"
|
@mouseleave="
|
() => {
|
hoverStop && startMove();
|
}
|
"
|
@wheel="
|
(e) => {
|
hoverStop && onWheel(e);
|
}
|
"
|
>
|
<div ref="slotListRef" :style="floatStyle">
|
<slot></slot>
|
</div>
|
<div :style="floatStyle">
|
<slot></slot>
|
</div>
|
</div>
|
|
<div
|
v-else
|
:style="realBoxStyle"
|
ref="realBoxRef"
|
@mouseenter="
|
() => {
|
hoverStop && stopMove();
|
}
|
"
|
@mouseleave="
|
() => {
|
hoverStop && startMove();
|
}
|
"
|
>
|
<div ref="slotListRef" :style="floatStyle">
|
<slot></slot>
|
</div>
|
<div :style="floatStyle">
|
<slot></slot>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss"></style>
|
