vue 向上无缝滚动,vue实现横向滚动
这篇文章主要为大家详细介绍了某视频剪辑软件实现列表垂直无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现列表垂直无缝滚动的具体代码，供大家参考，具体内容如下
实现新闻列表的轮播（如下图)
上代码
封装的so-marquee.vue
模板
差异
跑马灯包装
:style={ width: realWidth px }
差异
字幕容器
:style={ height: realHeight px }
字体名称
保险商实验所
ref=马克经济
:id=tooltipId
字幕内容
:class={ anim: animate===true}
@mouseenter=handleStop()
@mouseleave=handleUp()
里
v-for=(item，index) in realData
:key= ` $ { tooltipId }-$ { item。id }-$ { index } `
class=marquee-item
:style={ height: itemHeigth px }
@click=handleClick(item)
slot name= itemCon :item= item /slot
/李
/ul
/div
/div
/模板
脚本
从" @/utils/util "导入{ parseToNum，generateId }
导出默认值{
名称： so-marquee ，
道具：{
/*
* 可接受传参
*数据列表数据
*类名自定义类名
*宽度列表宽度，默认值：400
*高度列表高度，默认值：200
*显示号码可视的条目数，默认值：5
*速度轮播速度，默认值：1000
* */
//列表数据
数据：{
类型：数组，
默认值：()=[],
},
//自定义类名
className: String，
//列表宽度，默认值：400
宽度：{
类型：[数字，字符串],
默认值：400
},
//列表高度，默认值：200
高度：{
类型：[数字，字符串],
默认值：200
},
//可视的条目数，默认值：5
显示号码：{
类型：[数字，字符串],
默认值：5
},
//轮播速度，默认值：1000
速度：{
类型：[数字，字符串],
默认值：1000
}
},
data() {
返回{
intnum:未定义，
动画：假
};
},
计算值：{
tooltipId() {
返回` marquee-con-$ { generate id()} `；
},
实宽(){
返回parseToNum(this.width)
},
realHeight() {
返回parseToNum(this.height)
},
realShowNumber() {
返回parseToNum(this.showNumber)
},
realSpeed() {
返回parseToNum(this.speed) 1000？1000 : parseToNum(this.speed)
},
itemHeigth() {
返回这个。真实身高/这个。真实显示号码
},
realData() {
返回JSON。解析(JSON。stringify(这个。数据))
}
},
已安装(){
如果(这个。真实数据。长度这个。真实显示号码){
这个。向上滚动()；
}
},
方法：{
scrollUp() {
//eslint-disable-next-line no-unused-vars
this.intnum=setInterval(_={
this.animate=true
setTimeout(()={
这个。真实数据。推(这个。真实数据[0])；//将数组的第一个元素添加到数组的
这个。真实数据。shift()；//删除数组的第一个元素
this.animate=false//上边距为0 的时候取消过渡动画，实现无缝滚动
}，this.realSpeed/2)
这个$once(hook:beforeDestroy ，()={
this.cleanup()
})
}，这个。真实速度)；
},
handleStop() {
this.cleanup()
},
handleUp() {
这个。向上滚动()；
},
手柄单击（行){
这个发出( handleClick ，row)
},
清理(){
if (this.intnum) {
清除间隔(这个。int num)；
this.intnum=null
}
}
},
销毁前(){
这个。清理()；
},
停用(){
这个。清理()；
},
观察：{
动画（旗帜){
this.marqueeCon=this .$refs.marqueeCon
如果（标志){
这个。马克经济。风格。margin top=`-$ { this。itemheigth } px ` 1
}否则{
这个。马克经济。风格。上边距=0
}
},
}
};
/脚本
样式范围的语言=scss 。字幕容器{
溢出：隐藏；
}。字幕内容{
位置：相对；
}。动画{
过渡：全0.5s
}。选取框项目{
显示器：flex
对齐-项目：居中；
justify-content:space-around；
}
/风格
parseToNum方法
导出函数parseToNum(值){
如果（值！==未定义){
value=parseInt(值，10)
if (isNaN(value)) {
值=空
}
}
返回值
}
generateId 方法
export const generate id=function(){
返回数学。地板(数学。random()* 10000)；
};
父组件调用
模板
div id=应用程序
so-marquee
:data=jsonData
：高度=200
:showNumber=4
：速度=500
我的用户界面字幕
@ handle click= handlemarqueclick
模板v-slot:itemCon="{ item } "
div{{ item.id }}/div
div{{ item.name }}/div
div{{ item.date }}/div
/模板
/so-marquee
/div
/模板
脚本
从导入soMarquee ./components/so-marquee
导出默认值{
名称："应用程序",
data() {
返回{
jsonData: [
{
id: 1，
名称： 开会通知，
日期："2020年2月一日"
},
{
id: 2，
名称： 放假通知，
日期："2020年2月2日"
},
{
id: 3，
名称： 停水通知，
日期："2020年2月3日"
},
{
id: 4，
名称： 停电通知，
日期："2020年2月四日"
},
{
id: 5，
名称： 停车通知，
日期："2020年2月5日"
},
{
id: 6，
名称： 奖励通知，
日期："2020年2月6日"
},
{
id: 7，
名称： 处分通知，
日期："2020年2月七日"
},
{
id: 8，
名称： 处分8通知，
日期："2020年2月8日"
},
{
id: 9，
名称： 处分9通知，
日期："2020年2月9日"
},
{
id: 10，
名称： 处分10通知，
日期："2020年2月10日"
},
]
}
},
组件：{
soMarquee
},
方法：{
handleMarqueeClick(世界其他地区){
警报(` 1当前点击的第${row.id}行`)
}
}
}
/脚本
样式范围的语言=scss 。my-ui-marquee {
* v深。选取框项目{
光标：指针；
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。