本文实例为大家分享了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>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript JSON模块如何工作，过程是怎样

  本篇文章带大家了解一下ECMAScript 新提案：JSON模块，来看看JSON模块是如何工作的，希望对大家有所帮助！

• JS下划线和驼峰互转的方法有几种，分别是怎样做的

  本文主要介绍了js下划线和驼峰互相转换的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• jQuery中怎么样删除元素内容，方法是什么？

  这篇文章给大家分享的是jQuery中怎么样删除元素内容的方法，文中给大家分享了两个方法，分别是利用children()和remove()方法、empty()方法，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• SetUp函数参数的使用是怎样，有哪些点要注意

  我们知道setup函数是组合API的核心入口函数,下面这篇文章主要给大家介绍了关于Vue3中SetUp函数的参数props、context的相关资料,需要的朋友可以参考下

• Vuex的作用和原理是什么？如何使用？

  这篇文章主要介绍Vuex的作用，很多新手对于Vuex的原理、使用以及其他概念不是很了解，下面小编就带大家深入的来接Vuex，感兴趣的朋友就继续往下看吧，希望大家阅读完这篇文章能有所收获。