<template> <div>  <marqueeLeft :send-val='send'></marqueeLeft > </div></template><script> import marqueeLeft from '../components/marquee' export default {  data:function(){   return{    send:[{place: "來(lái)自東莞市的", name: "黃女士"},   {place: "來(lái)自太原市的", name: "吳先生"},   {place: "來(lái)自常州市的", name: "戚先生"},   {place: "來(lái)自金華市的", name: "尤先生"},   {place: "來(lái)自貴陽(yáng)市的", name: "陳女士"},   {place: "來(lái)自長(zhǎng)春市的", name: "魏女士"},   {place: "來(lái)自泉州市的", name: "褚先生"},   {place: "來(lái)自南昌市的", name: "蔣女士"},   {place: "來(lái)自南京市的", name: "沈先生"},   {place: "來(lái)自天津市的", name: "韓先生"},   {place: "來(lái)自寧波市的", name: "鄒女士"},   {place: "來(lái)自嘉興市的", name: "周女士"},   {place: "來(lái)自長(zhǎng)沙市的", name: "秦先生"},   {place: "來(lái)自濟(jì)南市的", name: "孫女士"},   {place: "來(lái)自杭州市的", name: "楊先生"}]   }  },  components:{ marqueeLeft }, }</script>

<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>剛剛購(gòu)買(mǎi)了產(chǎn)品   </div>  </div> </div></template><script> export default {  name:'my-marquee-left',  props:{     sendVal:Array  },  data() {   return {    nowTime:null,//定時(shí)器標(biāo)識(shí)    disArr:[],//每一個(gè)內(nèi)容的寬度   }  },   mounted:function(){   var that = this;   var item = this.$refs.list;    var len = this.sendVal.length;   var arr = [];   var margin = this.getMargin(item[0]) //因?yàn)樵O(shè)置的margin值一樣，所以取第一個(gè)就行。   for(var i = 0;i < len;i++){    arr.push(item[i].clientWidth + margin)//把寬度和 margin 加起來(lái)就是每一個(gè)元素需要移動(dòng)的距離   }   this.disArr = arr;   this.moveLeft();  },  beforeDestroy:function(){   clearInterval(this.nowTime);//頁(yè)面關(guān)閉清除定時(shí)器   this.nowTime = null;//清除定時(shí)器標(biāo)識(shí)  },  methods:{   //獲取margin屬性   getMargin:function(obj){    var marg = window.getComputedStyle(obj,null)['margin-right'];    marg = marg.replace('px','')    return Number(marg) //強(qiáng)制轉(zhuǎn)化成數(shù)字   },   //移動(dòng)的方法   moveLeft:function(){    var outbox = this.$refs.box;    var that=this;    var startDis = 0;//初始位置    this.nowTime = setInterval(function(){     startDis -= 0.5;     if(Math.abs(startDis) > Math.abs(that.disArr[0])){      that.disArr.push(that.disArr.shift())//每次移動(dòng)完一個(gè)元素的距離，就把這個(gè)元素的寬度      that.sendVal.push(that.sendVal.shift())//每次移動(dòng)完一個(gè)元素的距離，就把列表數(shù)據(jù)的第一項(xiàng)放到最后一項(xiàng)      startDis = 0;     }     outbox.style = 'transform: translateX('+ startDis +'px)'; //每次都讓盒子移動(dòng)指定的距離    },1000/60)   }  } }</script><style lang="less" scoped> .my-outbox{  color: #D7BC8D;  overflow: hidden;  height: 35px;  background: #422b02;  .my-inbox{   white-space: nowrap;   .my-list{    margin-right: 25px;    display: inline-block;    font-size: 13px;    height: 35px;    line-height: 35px;    .my-uname{     color: #FF8900;    }   }  } }</style>