vue 向上无缝滚动,vue实现无限滚动
这篇文章主要为大家详细介绍了某视频剪辑软件实现列表无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现列表无缝滚动的具体代码，供大家参考，具体内容如下
超文本标记语言部分代码
模板
div id=box class=wrapper
包含 id= con 1 ref= con 1 :class= { anim:animate==true }
目录
v-for=(item，index) in cloudList
:key=index
:listData=item
:index=index
:date=date
/列表
/div
/div
/模板
目录是单个列表组件，也可以替换成李。
钢性铸铁部分代码
样式范围。包装{
宽度：96vw
身高：90vh
位置：绝对；
左：2vw
顶部：1雷姆；
溢出：隐藏；
}。包含div:n-child(2n){//这个样式是我这个项目所需，与无缝滚动无直接关系，可以忽略
左边距：2vw
}。动画{
过渡：全0.5s
边距-顶部：-7vh；
}
/风格
我的目录组件是设置了浮动：左侧的，所以id=con1 的差异是没有高度的
射流研究…部分代码
脚本
从导入列表./列表；
导出默认值{
名称："包含",
data () {
返回{
云列表：[],//数组用来存放列表数据
日期： ,//最新数据更新日期
动画：假，
时间：3000,//定时滚动的间隙时间
setTimeout1: null，
设置间隔1:空
};
},
组件：{
目录
},
方法：{
//获取数据数据并且更新日期
getCloudListData () {
const _ this=这个
_这个api.getCloudListData().然后(res={
_ this.cloudList=res
});
var new Date=new Date()；
_这个。date=_ this。dateftt( yyyy-MM-DD hh:MM:ss ，新日期)；
},
//日期格式化
dateFtt (fmt，date) {
var o={
M : date.getMonth() 1，//月份
d : date.getDate()，//日
h : date.getHours()，//小时
m : date.getMinutes()，//分
s : date.getSeconds()，//秒
问：数学。楼层((日期。getmonth()3)/3)，//季度
S: date.getMilliseconds() //毫秒
};
if (/(y )/.测试(fmt)) {
fmt=fmt.replace(
正则表达式。$1,
(date.getFullYear() ).substr(4 - RegExp .$1 .长度)
);
}
for (var k in o) {
if(new RegExp(( k )).测试(fmt)) {
fmt=fmt.replace(
正则表达式。$1,
正则表达式长度===1
？好的
:( 00 o[k]).substr(( o[k]).长度)
);
}
}
返回滤波多音
},
//滚动
滚动(){
const _ this=这个
_ this.animate=true
清除超时(_ this。settime out 1)；
_这个。setTimeout 1=setTimeout(()={
var parent=文档。getelementbyid(“con 1”)；
var first=文档。getelementbyid( con 1 ).儿童[0];
var second=文档。getelementbyid( con 1 ).儿童[1];
父母。删除子对象(首先)；
parent.removeChild(秒);
父母。追加子对象(第一个)；
parent.appendChild(秒);
_ this.animate=false
}, 500);
}
},
已创建(){
const _ this=这个
_这个。getcloudlistdata()；
//定时器每隔24小时更新一次数据
setInterval(()={
_这个。getcloudlistdata()；
}, 24 * 60 * 60 * 1000);
},
已安装(){
const _ this=这个
var contain=文档。getelementbyid( box )；
_这个。setInterval 1=setInterval(_ this。滚动，_这个。时间)；
var setInterval2=null
//鼠标移入滚动区域停止滚动
包含。onmouseenter=function(){
清除间隔(_ this。setinterval 1)；
var count=0；
//如果鼠标超过十秒不动就启动滚动
setInterval 2=setInterval(function(){
数数；
if (count===10) {
_这个。滚动()；
_这个。setInterval 1=setInterval(_ this。滚动，_这个。时间)；
}
}, 1000);
//鼠标一动就停止滚动并且计数数数置为0
包含。onmousemove=function(){
count=0；
清除间隔(_ this。setinterval 1)；
};
};
//鼠标移出滚动区域
包含。onmouse leave=function(){
清除间隔(setinterval 2)；
清除间隔(_ this。setinterval 1)；
_这个。滚动()；
_这个。setInterval 1=setInterval(_ this。滚动，_这个。时间)；
};
}
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。