vue实现无缝滚动（vue-seamless-scroll插件、css动画、scrollTop方法）

方法一：vue-seamless-scroll插件

安装依赖

//vue2
npm install vue-seamless-scroll --save
 
//vue3
npm install vue3-seamless-scroll --save

全局引入组件

//vue2
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)
 
//vue3 
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

组件使用，配置相关属性

vue2

<template>
  //这里写的行内样式，需要时自己补充
  <vue-seamless-scroll
        class="scroll_box"
        :data="dataList"
        :class-option="defineScroll"
        style="
          height: 100%;
          overflow: hidden;
          width: 100%;
          color: white;
          font-size: 18px;
          text-align: center;
        "
      >
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            style="padding: 10px 0; margin: 5px"
          >
            <span class="name">{{ item.name }}</span>
            <span class="Etiology">{{ item.Etiology }}</span>
            <span class="status">{{ item.status }}</span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
   </vue-seamless-scroll>
</template>
 
data() {
    return {
      dataList: [
        {
          time: "XXXXXXXXX",
          name: "XX",
          Etiology: "XX",
          status: "XXX",
        },
        ......
      ],
    };
  },
  //定义计算属性，默认执行一次（监听，类似于data概念）；
  computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        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)
      };
    },
  },
 

vue3

<template>
  <vue3-seamless-scroll
    :list="state.list"
    class="scroll"
    :step="0.5"
    hover="true"
  >
    <div class="item" v-for="(item, index) in state.list" :key="index">
      <span>{{ item.title }}</span>
      <span>{{ item.date }}</span>
    </div>
  </vue3-seamless-scroll>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";

const state = reactive({
  list: [
    {
      title: "无缝滚动第一行无缝滚动第一行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第二行无缝滚动第二行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第三行无缝滚动第三行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第四行无缝滚动第四行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第五行无缝滚动第五行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第六行无缝滚动第六行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第七行无缝滚动第七行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第八行无缝滚动第八行",
      date: "2017-12-16",
    },
    {
      title: "无缝滚动第九行无缝滚动第九行",
      date: "2017-12-16",
    },
  ],
});
</script>
<style lang='less' scoped>
.scroll {
  height: 200px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>

vue-seamless-scroll插件在线演示文档

相关属性

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay	1.1.17 版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

效果

仅供参考

vue实现无缝滚动

方法二：css动画实现无缝滚动

<div class="b_list">
  <div class="b_scroll">
    <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex">
      <!-- 循环的内容 -->
    </div>
  </div>
</div>

css:使用纯css动画实现数据向上滚动

@keyframes scrollTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}
.b_list{
  height: 19rem;
  overflow: hidden;
}
 
.b_scroll{
   -webkit-animation: 10s scrollTop linear infinite normal;
   animation: 10s scrollTop linear infinite normal;
} 

方法三：使用scrollTop方法向上滚动

scrolltolowerOne() {
  this.breakfastScrollInterval = setInterval(() => {
    let div = document.getElementById("breakfastList");
    if (div) {
      if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
        this.breakfastScrollTop = 0;
      } else {
        this.breakfastScrollTop += 1;
      }
      div.scrollTop = this.breakfastScrollTop;
    } else {
      clearInterval(this.breakfastScrollInterval);
      this.breakfastScrollInterval = null;
    }
  }, 50);
};