vue实现循环跑马灯效果,vue跑马灯插件
本文主要详细介绍了如何使用Vue ticker的marquee组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
在本文中，我们分享了Vue ticker的marquee组件的具体代码，供大家参考。具体内容如下
一、实现效果
二、实现过程
前言：一开始用间隔器方案做了一个ticker，但是放在移动终端会出现严重的掉帧和卡顿现象，于是在整理思路后，采用过渡方案，从右到左做了一个动画来处理问题。
思路整理：
1.过渡需要一定的时间，但是滚动条中的文本可能有不同的长度。
解决方案：根据文本的总宽度(即文本的总长度)设置过渡时间。假设文字宽度为500px，我们除以50，即转场时间为10s。
原生js表示如下：
const text=document . getelementsbyclassname( text )[0]//text
const text width=text.clientwidth//The文本的总宽度
constrantime=text width/50//根据文本宽度设置过渡时间
text . style . transition= left trantime的线性//在滚动前绑定转换属性
2.如果要保持滚动，需要重复触发滚动的事件。
解决方案：通过上面的过渡时间设置重复时间。
原生js表示如下：
constant time=Trantime * 1000 1000//重新开始滚动时间计算(动态)
//开始滚动
函数textRoll() {
//滚动操作
//``````
setTimeout(()={
textRoll()
}，again time)；
}
3.接下来，实现文字滚动效果。
1)首先在容器的最右侧设置文本。
2)为文本绑定设置好过渡属性，例如：过渡：左10s线性
3)由于过渡属性，此时将文本设置到容器的最左侧将导致从右到左的过渡。
原生js表示如下：
函数textRoll() {
text . style . transition= left trantime的线性//在滚动前绑定转换属性
text . style . left=-text width px //移动到容器的最左侧
setTimeout(()={
setTimeout(()={
textRoll()
}, 0);
}，again time)；
}
4.至此，可以有一个完整的滚动，下一步是定义重新滚动
让文本回到容器的最右侧，但目前，文本已经有了一个过渡属性。如果你改变它的左边，会导致它从左向右滚动，所以你要先清除transition属性，然后把它的左边改变到容器的最右边，再用第一次设置的滚动时间重新绑定定时器。
函数textRoll() {
text . style . transition= left trantime的线性//在滚动前绑定转换属性
text . style . left=-text width px //移动到容器的最左侧
setTimeout(()={
//恢复文本位置
Text.style.transition= //还原前清除过渡。
text . style . left=wrap perwidth px
setTimeout(()={
textRoll()
}, 0);
}，again time)；
}
三、js版本源码
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
字幕/标题
风格
* {
边距：0；
填充：0；
}
正文{
身高：100vh
显示器：flex
justify-content:居中；
对齐-项目：居中；
}。包装{
宽度：60%；
高度：30px
背景色：# 000；
溢出：隐藏；
位置：相对；
}。文本{
颜色：# fff
空白：nowrap
行高：30px
位置：绝对；
}
/风格
/头
身体
div class=wrapper
Div= text 第四纪怎么会是天子，还不如陆家的莫愁呢？/div
/div
脚本
const wrapper=document . getelementsbyclassname( wrapper )[0]//容器
const text=document . getelementsbyclassname( text )[0]//text
const wrapper width=wrapper.clientwidth//The集装箱的总宽度
const text width=text.clientwidth//The文本的总宽度
text . style . left=wrapper width px //在开始滚动之前，将文本设置在容器的最右侧之外。
const tranTime=textWidth/50 //根据文本宽度设置过渡时间
再次常量时间=传输时间* 1000 1000//重新开始滚动时间计算（动态)
setTimeout(()={
textRoll()
}, 0);
//开始滚动
函数textRoll() {
文字。风格。transition= left transtime s linear //滚动前绑定过渡属性
文字。风格。left=-文本宽度 px //向容器最左移动
setTimeout(()={
//还原文本位置
text.style.transition= //还原前需清除过渡
文字。风格。left=换行全宽 px
setTimeout(()={
textRoll()
}, 0);
}，再一次)；
}
/脚本
/body
/html
四、Vue组件源码
模板
div class=移动字幕
img src= ~ assets/img/home/notice/notice。png alt= /
div class= mobile-marquee-wrapper ref= wrapper
差异
class=mobile-marquee-text
ref=text
:style={ left: textLeft， transition: textTransition }
{{ text }}
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
文本：
海外徒闻更九州，他生未卜此生休。空闻虎旅传宵柝，无复鸡人报晓筹。此日六军同驻马，当时七夕笑牵牛。如何四纪为天子，不及卢家有莫愁。,
url: ，
textLeft: ，
文本转换：""
};
},
方法：{
//跑马灯运作
marquee() {
const _this=这个
const wrapperWidth=this .$参考文献。包装纸。客户端宽度；//容器的总宽度
const textWidth=this .$参考文献。文字。客户端宽度；//文本的总宽度
const trans time=文本宽度/50；//根据文本宽度设置过渡时间
const再次时间=trans时间* 1000 1000；//重新开始滚动时间计算（动态)
这个。text left=包装宽度 px ；//开始滚动前设定文本在容器最右侧以外
setTimeout(()={
textRoll()
}, 0);
函数textRoll() {
_这个。text transition= left transTime s linear ；//滚动前绑定过渡属性
_这个。text left=-文本宽度“px”；//向容器最左移动
setTimeout(()={
//还原文本位置
_ this.textTransition= none//还原前需清除过渡
_这个。text left=wrap perwidth px
setTimeout(()={
文字滚动()；
}, 0);
}，再一次)；
}
},
},
已安装(){
这个。marquee()；
}
};
/脚本
风格。移动字幕{
显示器：flex
对齐-项目：居中；
高度：40px
边距：0 16px
}。移动字幕包装器{
flex:1；
高度：40px
溢出：隐藏；
位置：相对；
}。移动字幕img {
宽度：14px
高度：12px
右边距：7px
}。移动字幕文本{
颜色：# 333;
空白：nowrap
行高：40px
位置：绝对；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。