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

文章目录

- 背景
- 效果
- 逻辑
- 代码
- 心得

背景

之前做了一个需求，里面有一个滚动通知栏 。

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

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

参考： NoticeBar 通知栏 - Vant4

效果

html 复制代码

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

可配置：

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

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

逻辑

初始状态下，内容位置：

滚动逻辑：

代码

初始化

html 复制代码

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

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

typescript 复制代码

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

滚动逻辑

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

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

typescript 复制代码

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

完整代码

组件：

html 复制代码

<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: string
  speed: 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.offsetWidth
  contentWidth.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>

调用：

html 复制代码

<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，渲染出来后才有宽度）。

当时把宽度写死了，相当于替代了动态计算的步骤。