vue实现无缝滚动功能

发现element和iview都没问无缝滚动的特效，只有走马灯的，最近需要用到无缝滚动的特效，就在npm上找了一个插件

vue-seamless-scroll

我是在nuxt里用的

1.安装

yarn add vue-seamless-scroll

2.在plugins里新建vue-seamless-scroll.js文件

import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default () => {
  Vue.use(vueSeamlessScroll)
}

 

3.在nuxt.config.js里引用（注意：此处需要将ssr设为false，否则会报错）

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/v-viewer.js',
    { src: '@/plugins/vue-seamless-scroll.js', ssr: false}
  ],

4.具体实现代码

html：

 <vue-seamless-scroll
      :data="dataArr"
      :class-option="initOption"
      style="height: 100px; overflow: hidden;">
      <ul>
        <li
          v-for="(item,index) in dataArr"
          :key="index">
          {{ item.name }}
        </li>
      </ul>
    </vue-seamless-scroll>

js:

 computed: {
      initOption () {
        return {
          hoverStop: true, //鼠标移入时是否停止滚动
          singleHeight: 0,
          waitTime: 0,
          step: 0.2, // 滚动速度，越大越快
        }
      }
    },

step: 0.3　//滚动速度，数值越大速度滚动越快
limitMoveNum: 5, //开始无缝滚动的数据量，可根据需滚动的内容进行配置
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: 1000 // 单个停止的时间(默认值1000ms)

更多属性移步：vue-seamless-scroll - npm

无缝滚动效果如图：