【vue】NoticeBar：滚动通知栏组件手动实现（内容、速度、循环间隔可配置）

背景

之前做了一个需求，里面有一个滚动通知栏。
由于是活动页面，逻辑不复杂，使用技术栈为svelte，没有UI组件库。原生实现的通知栏，它的滚动有点问题。由于时间紧张，使用了不够好的方法实现：
【IOS webview】css动画，首次进入异常（滚动很缓慢），息屏后重新进入才正常_css3 animation scroll动画在ios中需要切一下屏幕才会运行-CSDN博客

目的：手动实现一个滚动通知栏。了解循环滚动逻辑。

参考： NoticeBar 通知栏 - Vant4

效果

<NoticeBarVue :content="content" :speed="speed" :loopWait="loopWait"></NoticeBarVue>

可配置：

• content：内容，一般为长文本。需要大于容器距离才会滚动
• speed：移动速度。每秒移动多少px
• loopWait：循环间隔。循环完成后等待多少秒后进行下一次循环。

由于容器的宽度、背景色等配置不是本次代码的重点，直接写死了。如有需要可以自己改为可配置的。

逻辑

初始状态下，内容位置：

滚动逻辑：

代码

初始化

  <div class="scroll-bar" ref="scrollBarRef"><div class="content" ref="contentRef">{{ props.content }}</div></div>

获取容器宽度（offsetWidth）和内容实际宽度（scrollWidth ）。

  containerWidth.value = scrollBarRef.value.offsetWidthcontentWidth.value = contentRef.value.scrollWidth // scrollWidth 内容的实际宽度

滚动逻辑

position 表示当前内容偏移位置：

• 0：相当于初始状态
• -contentWidth：向左移动距离为内容距离，即向左滚动完毕的距离
• containerWidth：向右距离为容器距离，即循环刚开始的距离
• containerWidth.value + props.loopWait * props.speed：加上了循环间隔的距离。
  • 如果不想循环完成后立马开始循环，可以增加一个等待时间。这里定义为loopWait。
  • loopWait*speed 就是多走的距离，即循环间隔的距离

const handleScroll = () => {if (!scrollBarRef.value || !contentRef.value) {return}//   滚动完时，重置位置。循环的开始位置是容器最右边if (position.value < -contentWidth.value) {position.value = containerWidth.value + props.loopWait * props.speed}position.value -= props.speed // 速度：每秒向左移动的距离contentRef.value.style.transform = `translateX(${position.value}px)`//   平滑滚动。告诉浏览器，在下次重绘之前，调用此回调scrollId.value = requestAnimationFrame(() => handleScroll())
}

设置contentRef的偏移距离。

调用requestAnimationFrame：效果是很平滑地滚动。

告诉浏览器你希望执行一个动画。它要求浏览器在下一次重绘之前，调用用户提供的回调函数。
Window：requestAnimationFrame() 方法 - Web API | MDN

完整代码

组件：

<template><div class="scroll-bar" ref="scrollBarRef"><div class="content" ref="contentRef">{{ props.content }}</div></div>
</template><script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue'
interface NOTICEBAR {content: stringspeed: number // 每秒移动距离loopWait: number // 循环间隔
}const props = defineProps<NOTICEBAR>()
const scrollBarRef = ref()
const contentRef = ref()
const scrollId = ref()onMounted(() => {initScroll()
})const position = ref(0)
const containerWidth = ref(0)
const contentWidth = ref(0)// 初始化滚动
const initScroll = () => {if (!scrollBarRef.value || !contentRef.value) {return}containerWidth.value = scrollBarRef.value.offsetWidthcontentWidth.value = contentRef.value.scrollWidth // scrollWidth 内容的实际宽度// 容器>内容，无需滚动if (containerWidth.value > contentWidth.value) {contentRef.value.style.transform = 'translateX(0)'return}handleScroll()
}const handleScroll = () => {if (!scrollBarRef.value || !contentRef.value) {return}//   滚动完时，重置位置。循环的开始位置是容器最右边if (position.value < -contentWidth.value) {position.value = containerWidth.value + props.loopWait * props.speed}position.value -= props.speed // 速度contentRef.value.style.transform = `translateX(${position.value}px)`//   平滑滚动。告诉浏览器，在下次重绘之前，调用此回调scrollId.value = requestAnimationFrame(() => handleScroll())
}
</script><style lang="less" scoped>
.scroll-bar {width: 400px;overflow: hidden;
}
</style>

调用：

<template><div><a href="https://vant4.ylhtest.com/#/zh-CN/notice-bar">参考vant</a><div class="container"><NoticeBarVue :content="content" :speed="speed" :loopWait="loopWait"></NoticeBarVue></div></div>
</template><script setup lang="ts">
import NoticeBarVue from '@/components/notice-bar.vue'const content = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnopqrstuvwxyz1234567890'
const speed = 1
const loopWait = 50
</script><style lang="less" scoped>
.container {background-color: #fffbe8;margin: 10px 0;
}
</style>

心得

理解了滚动通知栏、循环滚动。

【IOS webview】css动画，首次进入异常（滚动很缓慢），息屏后重新进入才正常_css3 animation scroll动画在ios中需要切一下屏幕才会运行-CSDN博客的问题是，没有显示地计算宽度。所以页面自适应地渲染的时候，会出问题（默认为0，渲染出来后才有宽度）。
当时把宽度写死了，相当于替代了 动态计算 的步骤。