本文例項為大家分享了實現列表無縫滾動的具體程式碼，供大家參考，具體內容如下

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。

部分程式碼

<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是沒有高度的

部分程式碼

<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)) {
www.cppcns.com
 
          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 http://www.cppcns.com() {
      clearInterval(_this.setInterval1);
      var count = 0;
      // 如果滑鼠超過十秒不動 就啟動滾動
      setInterval2 = setInterval(function () {
        count++;
        if (count === 10) {
          _this.scrwww.cppcns.comoll();
          _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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。