最近做的这个项目里看到无缝滚动的效果, 是另一个同事做的, 看了下他的代码, 是引入了vue-seamless-scroll这个插件实现的, 所以就搜了一下这个插件, 发现大家好像都是用的这个插件, 而且还能实现跑马灯的效果 , 想当初刚学js的时候一直纠结死都学不会的跑马灯 , 原来一个插件就能轻松实现 , 就学习了一下,实现了一个小demo

这是官网 , 更多demo和参数说明可以看这里

 chenxuan0000

vue-seamless-scroll

一, 打开终端, npm i vue-seamless-scroll下载依赖

二 , main.js中引入

三 , vue文件中使用

很简单的一个轮播效果

<template>
  <div>
    <vue-seamless-scroll :data="list" :class-option="options" class="box">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }}
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: ["第一条", "第二条", "第三条", "第四条"],
    };
  },
  computed: {
    options() {
      return {
        // 滚动速度 , 数值越大滚动越快
        step: 0.3,
        // 滚动的数据条数
        limitMoveNum: 2,
        // 鼠标点击停止滚动, 默认true
        hoverStop: false,
        // 按住鼠标停止滚动, 默认true
        openTouch: false,
        // 滚动方向 , 0 向下 , 1 向上 , 2 向左 , 3 向右
        direction: 1,
        // 单步运动停止的高度(默认是0, 无缝不停止的滚动,direction是0或1)
        // 就是滚多高停一下,再滚多高又停一下,停的时间就是waitTime
        // 这个高度,可以F12审查元素用箭头放在字上面看li的高度是多少
        singleHeight: 32,
        // 单步运动停止的宽度(默认是0, 无缝不停止的滚动,direction是2或3)
        singleWidth: 0,
        // 单步运动停止的时间 (默认值1000ms)
        waitTime: 2000,
        // 开启数据实时监控刷新dom
        openWatch: true,
      };
    },
  },
  methods: {},
};
</script>
 
<style lang="less" scoped>
.box {
  height: 2.5rem;
  background-color: pink;
  overflow: hidden;
}
</style>