首先，效果图：

(1)看起来可能有点卡住，但实际上页面看起来相当流畅。

(2)思路是获取每个列表的宽度，设置定时器移动列表，当移动距离达到一个列表的宽度时，将距离放在数组的末尾。这样就可以实现无缝环轧。

总体情况如下：

下一步是代码的实现：

Index.vue引入了组件

模板div Marqueleft : send-val=' send '/Marqueleft/div/template script从导入Marqueleft './components/Marquee ' export default { data : function(){ return { send :[{place: '来自东莞，} Name 3360 '黄女士' }，{place: '来自太原，} Name 3360 '吴先生' }，{place: '来自常州，} Name 3360 '齐老师' }，{place: '来自金华，} Name 3360 '尤老师' }，{ place : '来自贵阳{place: '天津人，名为： '韩先生' }，{place: '宁波人，名为： '邹女士' }，{place: '嘉兴人，名为： '周女士' }，{place: '秦老师' }，{place: '济南人，名为： '孙小姐' }，{place: '杭州人'

模板div class=' my-发件箱' div class=' my-inbox ' ref=' box ' div class=' my-list ' v-for='(item，Index)在sendval' :键=' index ' ref=' list ' { { item。place } } span class=' my-uname ' { item。name}}/span刚买的产品/div /div/Template脚本导出默认{name:' my-marquee-left '，prop : { send val 3360 array }，data () {return {nowtime3360null，//timer id unlaw 3360[]，//每个内容的宽度}}，mounted:function () {var那=thisvar项目=这个。$ refs.listvar len=this . send val . length；var arr=[]；Varmargin=这个。getmargin(项[0])//因为设置的margin值相同，所以只取第一个。for(var I=0；我透镜；我){arr。推送(第[I]项)。client width margin)//将宽度和边距相加就是每个元素需要移动的距离} this.disArr=arrthis . moveleft()；}，befordestroy : function(){ clearInterval(this . now time)；//页面关闭和清除计时器this . now time=null；//清除timer id }，methods:{ //获取margin属性getmargin 3360 function(obj){ var margin=window . getcomputed style(obj，null)[' margin-right ']；玛格=玛格。replace ('px '，'')返回数字(marg)//strong制将其转换为数字}，//向左移动：function () {var发件箱=this。$ refs.box变量=这个；var startDis=0；//这个的初始位置。now time=set interval(function(){ start dis-=0.5；If(数学。ABS (startdis)数学。腹肌(那个。DISARR[0]){那。DISARR。推(那个。DISARR。shift())//每次移动一个元素的距离，这个元素的宽度就会变成这个。森瓦尔。推(那个。森瓦尔。}发件箱. style=' transform : translateX(' startDis ' px)'；//让框每次移动指定的距离}，1000/60)} }/script style lang=' less '范围。我的发件箱color: # d7bc8d飞越：隐藏；height: 35px背景技术# 422b02。我的收件箱{ white-space : nowrap；my-list { margin-right : 25px；display:内联块；font-size : 13px；height: 35px线高： 35px；my-uname { color : # ff 8900；}}} }/style(1)增加一个获取边距的方法，以保证在使用rem em等单位时，边距值不会出现偏差。

(2)如果它被引入到组件的页面中，则异步请求send-val的值。然后，在marquee.vue组件页面上，refs在大多数情况下将不可用。这时我自己的解决办法是：

marqueeLeft : send-val=' send ' v-if=' send '/marqueeLeft

这意味着只有当send不为空时才会呈现组件，但这种情况会导致如果请求响应太慢，组件将永远不会呈现，这可能会影响布局。

(3)如果不想每次都设置转换，可以对这个元素进行转换，然后修改数据中的数据，例如：

div class=' my-inbox ' : style=' transform : translatex(' cssStyle ' px)'/div//，然后将每次移动的值赋给js中的CSS style。但我不认为这有什么区别

如果你想实现这一点，可以上下无缝滚动。这个想法和左右无缝滚动是一样的。基本上只需要将变换改为Y轴移动，将每个列表的宽度改为高度即可。

不清楚这样会不会有问题，FPS总是接近60左右。我还没有发现任何缺点。

以上就是边肖介绍的vue定制字幕无缝滚动组件的详细讲解和集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！