本文实例为大家分享了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中使用CSS3实现内容无缝滚动的示例代码
- 详解vue 自定义marquee无缝滚动组件
- 基于vue.js无缝滚动效果
- vue的无缝滚动组件vue-seamless-scroll实例
- vue实现消息的无缝滚动效果的示例代码
- 解决Vue页面固定滚动位置的处理办法
- vue监听滚动事件实现滚动监听
- vue elementUI table表格数据 滚动懒加载的实现方法
- Vue.js实战之通过监听滚动事件实现动态锚点
- vue3实现CSS无限无缝滚动效果
本文由 华域联盟 原创撰写：华域联盟 » vue实现列表无缝滚动
转载请保留出处和原文链接：https://www.cnhackhy.com/73193.htm
