Vue2竖向文字滚动

Vue3文字滚动(TextScroll)

可自定义设置以下属性:

  • 滚动文字数组(sliderData),必传
  • 文字滚动时间间隔(interval),默认3000ms
  • 展示文字宽度(width),默认800px,可传100vw
  • 展示文字高度(height),默认60px

效果如图:

 ①创建VerticalTextSlider.vue组件: 




②在要使用的页面引入:


import VerticalTextSlider from 'components/VerticalTextSlider'
components: {
    VerticalTextSlider
}
sliderData: [
        {
          title: '美国作家杰罗姆·大卫·塞林格创作的唯一一部长篇小说',
          link: 'javascript:;'
        },
        {
          title: '首次出版于1951年',
          link: 'javascript:;'
        },
        {
          title: '塞林格将故事的起止局限于16岁的中学生霍尔顿·考尔菲德从离开学校到纽约游荡的三天时间内',
          link: 'javascript:;'
        },
        {
          title: '并借鉴了意识流天马行空的写作方法,充分探索了一个十几岁少年的内心世界',
          link: 'javascript:;'
        },
        {
          title: '愤怒与焦虑是此书的两大主题,主人公的经历和思想在青少年中引起强烈共鸣',
          link: 'javascript:;'
        }
]

你可能感兴趣的:(Vue2,js,vue.js,javascript,less)