教你如何在组件中使用vue-seamless-scroll无缝滚动组件

最近因为需求需要写一个公告组件,这就需要使用无缝滚动插件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件。下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者文档。

安装:npm install vue-seamless-scroll --save

引入组件:import vueSeamlessScroll from 'vue-seamless-scroll'

配置:components: {
  vueSeamlessScroll
},
computed: {
    // 公告滚动自定义
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },

HTML:
  
  • {{$t('cs1111')}}:{{item}}

 

你可能感兴趣的:(vue)