dede网站打开慢,做采集网站赚钱,网站制作是那个,兰州网络公司排名旧项目用的 vue3-seamless-scroll 怎么写都不生效#xff0c;一看源码两年没更新了#xff0c;不想调试#xff0c;还是自己写吧#xff0c;再不济问问GPT都会更快一点 scroll.vue templatediv classscroll-container refscrollContainerR…旧项目用的 vue3-seamless-scroll 怎么写都不生效一看源码两年没更新了不想调试还是自己写吧再不济问问GPT都会更快一点 scroll.vue templatediv classscroll-container refscrollContainerRefdiv classscroll-content refscrollContentRefdivv-for(item, index) in items:keyindexclassscroll-item:style{ color: fontColor }{{ item.Content }}/divdivv-for(item, index) in items:keyclone- indexclassscroll-item:style{ color: fontColor }{{ item.Content }}/div/div/div /templatescript setup import { ref, onMounted, onUnmounted } from vue;const props defineProps({items: {type: Array,default: [],}, });const fontColor ref(#ffffff); const colors ref([#00FFD0,#FF8A22,#FFFC28,#FF6B5C,#FFA24F,#AAFFA8, ]); const intervalId ref(); const getRandomColor () {const randomIndex Math.floor(Math.random() * colors.value.length);return colors.value[randomIndex]; };const changeColor () {fontColor.value getRandomColor(); };const scrollContainerRef ref(null); const scrollContentRef ref(null);const updateDimensions () {const scrollContainerWidth scrollContainerRef.value.offsetWidth;const scrollContentWidth scrollContentRef.value.scrollWidth / 2;const scrollContentElement scrollContentRef.value;scrollContentElement.style.setProperty(--scroll-content-width,${scrollContentWidth}px);scrollContentElement.style.setProperty(--scroll-container-width,${scrollContainerWidth}px ); };const startAnimation () {const scrollContentElement scrollContentRef.value;scrollContentElement.classList.remove(paused);scrollContentElement.style.animation none;scrollContentElement.offsetHeight; // Trigger reflowscrollContentElement.style.animation ;scrollContentElement.classList.add(running); };onMounted(() {updateDimensions();window.addEventListener(resize, updateDimensions);changeColor();intervalId.value setInterval(changeColor, 1000);startAnimation() });onUnmounted(() {window.removeEventListener(resize, updateDimensions);clearInterval(intervalId.value); }); /scriptstyle langscss scoped .scroll-container {overflow: hidden;white-space: nowrap;width: 100%; }.scroll-content {display: flex;animation: scroll 20s linear infinite; }.scroll-item {display: inline-block;font-size: 24px;height: 29px;line-height: 29px;padding-right: 20px;transition: color 1s; }keyframes scroll {0% {transform: translateX(0);}100% {transform: translateX(calc(-1 * var(--scroll-content-width)));} } /style