vue3-seamless-scroll 无缝滚动插件使用

1. 安装

cnpm install vue-seamless-scroll -s

2. 在main.js中引入

// 无缝滚动插件
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3. 在vue的组件使用

<div v-if="positionList.length" class="mainBox">
  <vue-seamless-scroll :data="positionList " :class-option="optionSingleHeightTime" class="seamless-warp">
    <ul class="item">
      <li v-for="item in positionList">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</div>

设置滚动的配置：

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

4. 常用配置参数如下表：

5.官方地址和一些解决方案

官方地址
事件丢失、数据时有时无的问题解决方案