Vue超简单列表自动滚动（vue-seamless-scroll）

​

一、前言

列表自动滚动推荐vue插件 vue-seamless-scroll，安装引入即可使用，非常简单方便

二、流程

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save

安装时可能会出现下面问题，大致意思就是淘宝镜像证书已经过期，解决方案也很简单，切换镜像源就好了

#切换镜像源
npm config set registry https://registry.npmmirror.com/

2、项目中引入

 //单独引入
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    components: { 
      vueSeamlessScroll
    },
  }
  
  //或者在main.js引入
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)

3、使用

	//template中
    <vue-seamless-scroll :data="arr" class="scroll" :class-option="defaultOption">
      <div v-for="item in arr" :key="item.id">
        {{ item.name }}
      </div>
    </vue-seamless-scroll>
    
    computed: {
      defaultOption() {
      //vue-seamless-scroll参数配置
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum:4, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) 
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) 
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
  }
  //css中记得设置个高度
  .seamless-warp {
    width:100%;
    height: 100%;
    overflow: hidden;
  }

三、效果展示

​
如果还想深入了解，可点击vue-seamless-scroll在线演示文档