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

卑微程序媛8

已于 2024-01-24 17:32:06 修改

阅读量1.9k

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2024-01-24 17:27:38 首次发布

本文链接：https://blog.youkuaiyun.com/sr15801898769/article/details/135825103

本文介绍了如何在Vue项目中安装并使用vue-seamless-scroll插件实现列表自动滚动，包括解决npm镜像问题、组件引入方法、配置参数和CSS样式设置。附有在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

列表自动滚动推荐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;
  }