vue实现无限滚动,vue上下滚动效果
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单无缝滚动的具体代码，供大家参考，具体内容如下
效果
实现思路
在某视频剪辑软件中如何复制一份列表出来呢且不能丢失绑定的事件，很简单使用狭槽插槽，使用两个插槽我们就拥有了两个列表
div class=listScroll ref=box
插槽/插槽
插槽/插槽
/div
组件完整代码
模板
div class=listScroll ref=box
插槽/插槽
插槽/插槽
/div
/模板
脚本
导出默认值{
名称： listScroll ，
已创建(){},
已安装(){
//在盒子内容高度小于可视高度时不滚动
如果(这个。这个盒子高。ele 0。客户身高){
这个。开始(这个。身高)；
这个。setevet()；
}否则{
this.isScroll=false
}
},
道具：{
速度：{
默认值：1,
类型：数量，
},
},
计算值：{
//第一个狭槽
ele0() {
归还这个参考文献。盒子。儿童[0]；
},
//第二个狭槽
ele1() {
归还这个参考文献。盒子。儿童[1]；
},
//盒子的可视高度
boxHeight() {
归还这个参考文献。盒子。客户身高；
},
},
data() {
返回{
高度：0,
是的，
};
},
方法：{
//鼠标移入停止滚动移出继续滚动
setEvet() {
这个. refs.box.onmouseenter=()={
this.isScroll=false
//这个。高度=0；
};
这个. refs.box.onmouseleave=()={
this.isScroll=true
这个. nextTick(()={
这个。开始(这个。身高)；
});
};
},
//滚动方法
开始（高度){
这个。ele 0。style=` transform:translate y(-$ { height } px)；`;
这个。ele 1。style=` height:$ { this。框高} pxtransform:平移y(-$ { height } px)；溢出：隐藏；`;
如果(身高=这个。ele 0。客户身高){
这个。高度=0；
}否则{
这个。身高=这个。速度；
}
如果(!this.isScroll)返回；
窗户。requestanimationframe(()={
这个。开始(这个。身高)；
});
},
},
};
/脚本
style lang=less 范围。列表滚动{
溢出：隐藏；
}。悬停{
溢出-y:自动；
}。隐藏{
显示：无；
}
/风格
使用
模板
div class=" scroll "
列表滚动class=box :speed=1
div class=list
div class= item v-for= item in list :key= item。 xh
span{{ item.xh }}/span
span{{ item.label }}/span
/div
/div
/列表滚动
/div
/模板
脚本
从" @/组件/列表滚动"导入列表滚动；
导出默认值{
名称："卷轴",
组件：{ ListScroll }，
data() {
返回{
列表：新数组(10)。填充(1)。map((s，i)=({ xh: i 1，label: hello wrold }))，
};
},
};
/脚本
style lang=less 范围。方框{
高度：300像素
}。列表{
填充：0 10px
宽度：300像素。项目{
显示器：flex
justify-content:space-between；
填充：5px 0；
光标：指针；
：悬停{
背景色：# 95a5a6
}
}
}
/风格
至此一个简单的无缝滚动就完成了(vue2和vue3通用)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。