先上效果图：
（1） 看起来可能有点卡顿，但是实际上页面上看起来挺顺畅的。
（2） 思路就是获取每一个列表的宽度，设置定时器移动列表，当移动的距离达到一个列表的宽度的时候，把这个距离放到数组的最后。这样就能达成无缝循环滚动了。
大致的情况就是下面这样：
接下来就是代码的实现：
index.vue 引入组件
<template>
<div>
<marqueeLeft :send-val='send'></marqueeLeft >
</div>
</template>
<script>
import marqueeLeft from '../components/marquee'
export default {
data:function(){
return{
send:[{place: "来自东莞市的", name: "黄女士"},
{place: "来自太原市的", name: "吴先生"},
{place: "来自常州市的", name: "戚先生"},
{place: "来自金华市的", name: "尤先生"},
{place: "来自贵阳市的", name: "陈女士"},
{place: "来自长春市的", name: "魏女士"},
{place: "来自泉州市的", name: "褚先生"},
{place: "来自南昌市的", name: "蒋女士"},
{place: "来自南京市的", name: "沈先生"},
{place: "来自天津市的", name: "韩先生"},
{place: "来自宁波市的", name: "邹女士"},
{place: "来自嘉兴市的", name: "周女士"},
{place: "来自长沙市的", name: "秦先生"},
{place: "来自济南市的", name: "孙女士"},
{place: "来自杭州市的", name: "杨先生"}] }
},
components:{ marqueeLeft },
}
</script>marquee.vue 组件页面
<template>
<div class="my-outbox">
<div class="my-inbox" ref='box'>
<div class="my-list" v-for="(item,index) in sendVal" :key='index' ref='list'>
{{item.place}}<span class="my-uname">{{item.name}}</span>刚刚购买了产品
</div>
</div>
</div>
</template><script>
export default {
name:'my-marquee-left',
props:{
sendVal:Array
},
data() {
return {
nowTime:null,//定时器标识
disArr:[],//每一个内容的宽度
}
},
mounted:function(){
var that = this;
var item = this.$refs.list;
var len = this.sendVal.length;
var arr = [];
var margin = this.getMargin(item[0]) //因为设置的margin值一样，所以取第一个就行。
for(var i = 0;i < len;i++){
arr.push(item[i].clientWidth + margin)//把宽度和 margin 加起来就是每一个元素需要移动的距离
}
this.disArr = arr;
