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, // 滚动速度，越大越快
        }
      }
    },

更多属性移步：https://www.npmjs.com/package/vue-seamless-scroll

扫描二维码关注公众号，回复： 8991549 查看本文章

无缝滚动效果如图：