vue怎么实现列表无缝滚动

这篇文章给大家分享的是有关vue怎么实现列表无缝滚动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

具体内容如下

HTML部分代码

<template>   <div id="box" class="wrapper">     <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}">       <List         v-for="(item,index) in cloudList"         :key="index"         :listData="item"         :index="index"         :date="date"       ></List>     </div>   </div> </template>

List是单个列表组件，也可以替换成li。

css部分代码

<style scoped> .wrapper {   width: 96vw;   height: 90vh;   position: absolute;   left: 2vw;   top: 1rem;   overflow: hidden; } .contain > div:nth-child(2n) {//这个样式是我这个项目所需，与无缝滚动无直接关系，可以忽略   margin-left: 2vw; } .anim {   transition: all 0.5s;   margin-top: -7vh; } </style>

我的List组件是设置了float：left的，所以id="con1"的div是没有高度的

js部分代码

<script> import List from './List'; export default {   name: 'Contain',   data () {     return {       cloudList: [],//数组用来存放列表数据       date: '',//最新数据更新日期       animate: false,       time: 3000,//定时滚动的间隙时间       setTimeout1: null,       setInterval1: null     };   },   components: {     List   },   methods: {     // 获取json数据并且更新日期     getCloudListData () {       const _this = this;       _this.$api.getCloudListData().then(res => {         _this.cloudList = res;       });       var newDate = new Date();       _this.date = _this.dateFtt('yyyy-MM-dd hh:mm:ss', newDate);     },     // 日期格式化     dateFtt (fmt, date) {       var o = {         'M+': date.getMonth() + 1, // 月份         'd+': date.getDate(), // 日         'h+': date.getHours(), // 小时         'm+': date.getMinutes(), // 分         's+': date.getSeconds(), // 秒         'q+': Math.floor((date.getMonth() + 3) / 3), // 季度         S: date.getMilliseconds() // 毫秒       };       if (/(y+)/.test(fmt)) {         fmt = fmt.replace(           RegExp.$1,           (date.getFullYear() + '').substr(4 - RegExp.$1.length)         );       }       for (var k in o) {         if (new RegExp('(' + k + ')').test(fmt)) {           fmt = fmt.replace(             RegExp.$1,             RegExp.$1.length === 1               ? o[k]               : ('00' + o[k]).substr(('' + o[k]).length)           );         }       }       return fmt;     },     // 滚动     scroll () {       const _this = this;       _this.animate = true;       clearTimeout(_this.setTimeout1);       _this.setTimeout1 = setTimeout(() => {         var parent = document.getElementById('con1');         var first = document.getElementById('con1').children[0];         var second = document.getElementById('con1').children[1];         parent.removeChild(first);         parent.removeChild(second);         parent.appendChild(first);         parent.appendChild(second);         _this.animate = false;       }, 500);     }   },   created () {     const _this = this;     _this.getCloudListData();     //定时器每隔24小时更新一次数据     setInterval(() => {       _this.getCloudListData();     }, 24 * 60 * 60 * 1000);   },   mounted () {     const _this = this;     var contain = document.getElementById('box');     _this.setInterval1 = setInterval(_this.scroll, _this.time);     var setInterval2 = null;     // 鼠标移入滚动区域停止滚动     contain.onmouseenter = function () {       clearInterval(_this.setInterval1);       var count = 0;       // 如果鼠标超过十秒不动 就启动滚动       setInterval2 = setInterval(function () {         count++;         if (count === 10) {           _this.scroll();           _this.setInterval1 = setInterval(_this.scroll, _this.time);         }       }, 1000);       //鼠标一动就停止滚动并且计数count置为0       contain.onmousemove = function () {         count = 0;         clearInterval(_this.setInterval1);       };     };     // 鼠标移出滚动区域     contain.onmouseleave = function () {       clearInterval(setInterval2);       clearInterval(_this.setInterval1);       _this.scroll();       _this.setInterval1 = setInterval(_this.scroll, _this.time);     };   } }; </script>

感谢各位的阅读！关于“vue怎么实现列表无缝滚动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！