Vue3文字滚动(TextScroll)

简介: 这是一个可定制的文字滚动组件,支持水平和垂直滚动。主要属性包括滚动文字数组 `scrollText`、是否启用单条文字滚动 `single`、滚动区域宽高 `width` 和 `height`、滚动区域和文字样式 `boardStyle` 和 `textStyle`、滚动条数 `amount`、间距 `gap`、动画间隔 `interval` 和 `step`、以及垂直滚动时间间隔 `verticalInterval`。组件内置多种样式调整功能,并提供在线预览示例。

可自定义设置以下属性:

  • 滚动文字数组(scrollText),类型:Array<{title: string, link?: string}> | {title: string, link?: string},默认 [],滚动文字数组,single 为 true 时,类型为 Text;多条文字滚动时,数组长度必须大于等于 amount 才能滚动

  • 是否启用单条文字滚动效果(single),只支持水平文字滚动,为 true 时,amount 自动设为 1,默认 false

  • 滚动区域宽度(width),类型:number | string,单位 px,默认 '100%'

  • 滚动区域高度(height),类型:number,单位 px,默认 50

  • 滚动区域样式(boardStyle),优先级低于 width、height,类型:CSSProperties,默认 {}

  • 滚动文字样式(textStyle),类型:CSSProperties,默认 {}

  • 滚动区域展示条数,水平滚动时生效(amount),类型:number,默认 4

  • 水平滚动文字各列间距或垂直滚动文字两边的边距(gap),类型:number,单位 px,默认 20

  • 水平滚动动画执行时间间隔(interval),类型:number,单位 ms,水平滚动时生效,默认 10

  • 水平滚动动画每次执行时移动距离(step),类型:number,单位 px,水平滚动时生效,默认 1,与 interval 配合控制滚动速度

  • 是否垂直滚动(vertical),类型:boolean,默认 false

  • 垂直文字滚动时间间隔(verticalInterval),类型:number,单位 ms,垂直滚动时生效,默认 3000

效果如下图: 在线预览

其中引入使用了以下工具函数:

①创建文字滚动组件TextScroll.vue:

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { CSSProperties } from 'vue'
import { rafTimeout, cancelRaf, useResizeObserver } from '../utils'
interface Text {
  title: string // 文字标题
  link?: string // 跳转链接
}
interface Props {
  scrollText?: Text[] | Text // 滚动文字数组,single 为 true 时,类型为 Text;多条文字滚动时,数组长度必须大于等于 amount 才能滚动
  single?: boolean // 是否启用单条文字滚动效果,只支持水平文字滚动,为 true 时,amount 自动设为 1
  width?: number | string // 滚动区域宽度,单位 px
  height?: number // 滚动区域高度,单位 px
  boardStyle?: CSSProperties // 滚动区域样式,优先级低于 width、height
  textStyle?: CSSProperties // 滚动文字样式
  amount?: number // 滚动区域展示条数,水平滚动时生效
  gap?: number // 水平滚动文字各列间距或垂直滚动文字两边的边距,单位 px
  interval?: number // 水平滚动动画执行时间间隔,单位 ms,水平滚动时生效
  step?: number // 水平滚动动画每次执行时移动距离,单位 px,水平滚动时生效,与 interval 配合控制滚动速度
  vertical?: boolean // 是否垂直滚动
  verticalInterval?: number // 垂直文字滚动时间间隔,单位 ms,垂直滚动时生效
}
const props = withDefaults(defineProps<Props>(), {
  scrollText: () => [],
  single: false,
  width: '100%',
  height: 50,
  boardStyle: () => ({}),
  textStyle: () => ({}),
  amount: 4,
  gap: 20,
  interval: 10,
  step: 1,
  vertical: false,
  verticalInterval: 3000
})
const textData = computed(() => {
  if (props.single) {
    return [props.scrollText, props.scrollText]
  } else {
    const text = props.scrollText as Text[]
    if (text.length === props.amount) {
      return [...text, ...text]
    } else {
      return [...text]
    }
  }
})
const textAmount = computed(() => {
  return textData.value.length || 0
})
const totalWidth = computed(() => {
  // 文字滚动区域总宽度
  if (typeof props.width === 'number') {
    return props.width + 'px'
  } else {
    return props.width
  }
})
const displayAmount = computed(() => {
  if (props.single) {
    return 1
  } else {
    return props.amount
  }
})
const horizontalRef = ref() // 水平滚动 DOM 引用
const verticalRef = ref() // 垂直滚动 DOM 引用
const left = ref(0)
const distance = ref(0) // 每条滚动文字移动距离
const horizontalMoveRaf = ref()
const verticalMoveRaf = ref()
const origin = ref(true) // 垂直滚动初始状态
watch(
  () => [
    textData,
    props.width,
    props.amount,
    props.gap,
    props.step,
    props.interval,
    props.vertical,
    props.verticalInterval
  ],
  () => {
    initScroll()
  },
  {
    deep: true, // 强制转成深层侦听器
    flush: 'post'
  }
)
useResizeObserver([horizontalRef, verticalRef], () => {
  initScroll()
})
function initScroll() {
  if (!props.vertical) {
    distance.value = getDistance() // 获取每列文字宽度
  } else {
    origin.value = true
  }
  horizontalMoveRaf.value && cancelRaf(horizontalMoveRaf.value)
  verticalMoveRaf.value && cancelRaf(verticalMoveRaf.value)
  startMove() // 开始滚动
}
function getDistance(): number {
  return parseFloat((horizontalRef.value.offsetWidth / displayAmount.value).toFixed(2))
}
function startMove() {
  if (props.vertical) {
    if (textAmount.value > 1) {
      verticalMoveRaf.value && cancelRaf(verticalMoveRaf.value)
      verticalMove() // 垂直滚动
    }
  } else {
    if (textAmount.value > displayAmount.value) {
      // 超过 amount 条开始滚动
      horizontalMoveRaf.value && cancelRaf(horizontalMoveRaf.value)
      horizonMove() // 水平滚动
    }
  }
}
function horizonMove() {
  horizontalMoveRaf.value = rafTimeout(
    () => {
      if (left.value >= distance.value) {
        textData.value.push(textData.value.shift() as Text) // 将第一条数据放到最后
        left.value = 0
      } else {
        left.value += props.step // 每次移动step(px)
      }
    },
    props.interval,
    true
  )
}
function stopMove() {
  // 暂停动画
  if (props.vertical) {
    verticalMoveRaf.value && cancelRaf(verticalMoveRaf.value)
  } else {
    horizontalMoveRaf.value && cancelRaf(horizontalMoveRaf.value)
  }
}
const emit = defineEmits(['click'])
function onClick(text: Text) {
  // 通知父组件点击的标题
  emit('click', text)
}
const activeIndex = ref(0)
function verticalMove() {
  verticalMoveRaf.value = rafTimeout(
    () => {
      if (origin.value) {
        origin.value = false
      }
      activeIndex.value = (activeIndex.value + 1) % textAmount.value
      verticalMove()
    },
    origin.value ? props.verticalInterval : props.verticalInterval + 1000
  )
}
</script>
<template>
  <div
    v-if="!vertical"
    ref="horizontalRef"
    class="m-slider-horizontal"
    :style="[boardStyle, `--text-gap: ${gap}px; height: ${height}px; width: ${totalWidth};`]"
  >
    <div class="m-scroll-view" :style="`will-change: transform; transform: translateX(${-left}px);`">
      <a
        class="slide-text"
        :style="[textStyle, `width: ${distance}px;`]"
        v-for="(text, index) in <Text[]>textData"
        :key="index"
        :title="text.title"
        :href="text.link ? text.link : 'javascript:;'"
        :target="text.link ? '_blank' : '_self'"
        @mouseenter="stopMove"
        @mouseleave="startMove"
        @click="onClick(text)"
      >
        {
  { text.title || '--' }}
      </a>
    </div>
  </div>
  <div
    v-else
    ref="verticalRef"
    class="m-slider-vertical"
    :style="[
      boardStyle,
      ` --enter-move: ${height}px; --leave-move: ${-height}px; --tex-gap: ${gap}px; height: ${height}px; width: ${totalWidth};`
    ]"
  >
    <TransitionGroup name="slide">
      <div class="m-scroll-view" v-for="(text, index) in <Text[]>textData" :key="index" v-show="activeIndex === index">
        <a
          class="slide-text"
          :style="textStyle"
          :title="text.title"
          :href="text.link ? text.link : 'javascript:;'"
          :target="text.link ? '_blank' : '_self'"
          @mouseenter="stopMove"
          @mouseleave="startMove"
          @click="onClick(text)"
        >
          {
  { text.title || '--' }}
        </a>
      </div>
    </TransitionGroup>
  </div>
</template>
<style lang="less" scoped>
// 水平滚动
.m-slider-horizontal {
  overflow: hidden;
  box-shadow: 0px 0px 5px #d3d3d3;
  border-radius: 6px;
  background-color: #fff;
  .m-scroll-view {
    height: 100%;
    display: inline-flex;
    align-items: center;
    .slide-text {
      padding-left: var(--text-gap);
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
      line-height: 1.57;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: @themeColor;
      }
    }
  }
}
// 垂直滚动
.slide-enter-active,
.slide-leave-active {
  transition: all 1s ease;
}
.slide-enter-from {
  transform: translateY(var(--enter-move)) scale(0.5);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(var(--leave-move)) scale(0.5);
  opacity: 0;
}
.m-slider-vertical {
  overflow: hidden;
  box-shadow: 0px 0px 5px #d3d3d3;
  border-radius: 6px;
  background-color: #fff;
  position: relative;
  .m-scroll-view {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--tex-gap);
    .slide-text {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
      line-height: 1.57;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: @themeColor;
      }
    }
  }
}
</style>

②在要使用的页面引入:

<script setup lang="ts">
import TextScroll from './TextScroll.vue'
import { ref, reactive } from 'vue'
const scrollText = ref<any[]>([
  {
    title: '美国作家杰罗姆·大卫·塞林格创作的唯一一部长篇小说',
    link: 'https://blog.csdn.net/Dandrose?type=blog'
  },
  {
    title: '首次出版于1951年'
  },
  {
    title:
      '塞林格将故事的起止局限于16岁的中学生霍尔顿·考尔菲德从离开学校到纽约游荡的三天时间内,塞林格将故事的起止局限于16岁的中学生霍尔顿·考尔菲德从离开学校到纽约游荡的三天时间内'
  },
  {
    title: '并借鉴了意识流天马行空的写作方法,充分探索了一个十几岁少年的内心世界'
  },
  {
    title: '愤怒与焦虑是此书的两大主题,主人公的经历和思想在青少年中引起强烈共鸣'
  }
])
const singleText = {
  title: '请用一只玫瑰纪念我...',
  link: 'https://blog.csdn.net/Dandrose?type=blog'
}
function onClick(text: any) {
  // 获取点击的标题
  console.log('text:', text)
}
const state = reactive({
  single: false,
  height: 60,
  fontSize: 16,
  fontWeight: 400,
  color: 'rgba(0, 0, 0, 0.88)',
  backgroundColor: '#FFF',
  amount: 4,
  gap: 20,
  interval: 10,
  step: 1,
  vertical: false,
  verticalInterval: 3000
})
</script>
<template>
  <div>
    <h1>{
  { $route.name }} {
  { $route.meta.title }}</h1>
    <h2 class="mt30 mb10">水平文字滚动</h2>
    <TextScroll :scrollText="scrollText" @click="onClick" />
    <h2 class="mt30 mb10">自定义滚动速度</h2>
    <TextScroll :scrollText="scrollText" :step="2" @click="onClick" />
    <h2 class="mt30 mb10">单条文字滚动</h2>
    <TextScroll
      :scrollText="singleText"
      single
      :width="360"
      :text-style="{ fontSize: '24px', fontWeight: 600, color: '#FF5B29' }"
      @click="onClick"
    />
    <h2 class="mt30 mb10">垂直文字滚动</h2>
    <TextScroll
      :scrollText="scrollText"
      :board-style="{ backgroundColor: '#e6f4ff' }"
      :text-style="{ fontSize: '20px' }"
      vertical
      @click="onClick"
    />
    <h2 class="mt30 mb10">自定义样式</h2>
    <TextScroll
      :scrollText="scrollText"
      :board-style="{ backgroundColor: '#e6f4ff', borderRadius: '12px' }"
      :text-style="{ fontSize: '28px', color: '#FF9800' }"
      :gap="30"
      :height="80"
      @click="onClick"
    />
    <h2 class="mt30 mb10">文字滚动配置器</h2>
    <Row :gutter="[24, 12]">
      <Col :span="6">
        <Flex vertical>
          height:
          <Slider v-model:value="state.height" :min="6" :max="180" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex vertical>
          fontSize:
          <Slider v-model:value="state.fontSize" :min="6" :max="180" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex gap="small" vertical>
          fontWeight:
          <InputNumber v-model:value="state.fontWeight" :step="100" :min="100" :max="1000" />
        </Flex>
      </Col>
      <Col :span="6">
        <Space gap="small" vertical>
          color:
          <Input v-model:value="state.color" placeholder="color" />
        </Space>
      </Col>
      <Col :span="6">
        <Flex gap="small" vertical>
          backgroundColor:
          <Input v-model:value="state.backgroundColor" placeholder="backgroundColor" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex vertical>
          amount:
          <Slider v-model:value="state.amount" :min="1" :max="scrollText.length" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex vertical>
          gap:
          <Slider v-model:value="state.gap" :min="10" :max="100" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex vertical>
          interval:
          <Slider v-model:value="state.interval" :min="5" :max="100" />
        </Flex>
      </Col>
      <Col :span="6">
        <Flex vertical>
          step:
          <Slider v-model:value="state.step" :min="0.1" :step="0.1" :max="20" />
        </Flex>
      </Col>
      <Col :span="6">
        <Space gap="small" vertical>
          vertical:
          <Switch v-model="state.vertical" />
        </Space>
      </Col>
      <Col :span="6">
        <Flex vertical>
          verticalInterval:
          <Slider v-model:value="state.verticalInterval" :min="1000" :step="100" :max="10000" />
        </Flex>
      </Col>
    </Row>
    <TextScroll
      class="mt30"
      style="margin-bottom: 100px"
      :scrollText="scrollText"
      :single="state.single"
      :height="state.height"
      :board-style="{
        backgroundColor: state.backgroundColor
      }"
      :text-style="{
        fontSize: state.fontSize + 'px',
        fontWeight: state.fontWeight,
        color: state.color
      }"
      :amount="state.amount"
      :gap="state.gap"
      :interval="state.interval"
      :step="state.step"
      :vertical="state.vertical"
      :vertical-interval="state.verticalInterval"
      @click="onClick"
    />
  </div>
</template>
相关文章
|
4月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
725 5
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
231 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
141 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
89 0
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1486 0
|
4天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
57 1
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
516 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
524 77
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
96 0