text-scroll-horizontal

介绍

vue2 文本横向无限滚动组件。支持全局安装和局部安装；支持自定义滚动方向和速度。

:grin: gif图看着有点卡，实际很流畅哦

安装教程

npm i @jiexc0la/text-scroll-horizontal -S

使用说明

1. 全局安装

// main.js
import Vue from 'vue';
import TextScrollHorizontal from '@jiexc0la/text-scroll-horizontal';

Vue.use(TextScrollHorizontal);

2. 局部组件

<script>
import { TextScrollHorizontal } from '@jiexc0la/text-scroll-horizontal';

export default {
  components: {
    TextScrollHorizontal
  }
  ...
}
</script>

3. 参数说明

<text-scroll-horizontal
  :value="title"
  :animate-config="animateConfig"
  :is-overflow-scroll="true"
  custom-class="class-name"
></text-scroll-horizontal>

• value：文本内容
• animateConfig：动画配置
  • duration: number，动画持续时间（s），滚动一次当前容器宽度所需时长，默认值为5s
  • fixSpeed: number， 固定滚动速度，单位为像素/秒。若设置了固定滚动速度（fixSpeed > 0），则duration不生效。默认值为0。
  • delay: number，动画延迟时间（s）。默认值为0s
  • direction: string，动画方向，可选值：left|right，默认值为left
  • spaceWidth: number|string，无限滚动首尾空白宽度，数字为像素值，字符串为百分比值（相对于容器宽度），默认值为50%
  • hoverStop: boolean，鼠标悬停时是否停止动画，默认值为true
• isOverflowScroll：是否开启超出滚动，不开启文本溢出时显示省略。默认为true开启。
• customClass：传入自定义样式类名。