直接上代码
<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.name}}刚刚购买了产品-->
<span class="my-uname">{{item.detail}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'my-marquee-left',
props: {
sendVal: Array
},
data () {
return {
nowTime: null,
disArr: []
}
},
mounted () {
var item = this.$refs.list
var len = this.sendVal.length
var arr = []
var margin = this.getMargin(item[0])
for (var i = 0; i < len; i++) {
arr.push(item[i].clientWidth + margin)
}
this.disArr = arr
this.moveLeft()
},
beforeDestroy () {
clearInterval(this.nowTime)
this.nowTime = null
},
methods: {
getMargin (obj) {
var marg = window.getComputedStyle(obj, null)['margin-right']
marg = marg.replace('px', '')
return Number(marg)
},
moveLeft () {
var that = this
var outbox = this.$refs.box
var startDis = 0
console.log('that.disArr: ', that.disArr)
this.nowTime = setInterval(function () {
startDis -= 0.5
if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
console.log('come if .....')
that.disArr.push(that.disArr.shift())
that.sendVal.push(that.sendVal.shift())
startDis = 0
} else {
}
outbox.style = `transform: translateX(${startDis}px)`
}, 1000 / 60)
}
}
}
</script>
<style lang="scss" scoped>
.my-outbox{
overflow: hidden;
color: #FFFFFF;
height: 35px;
.my-inbox{
white-space: nowrap;
.my-list{
margin-right: 25px;
display: inline-block;
font-size: 0.3rem;
height: 40px;
line-height: 40px;
.my-uname{
color: #FFFFFF;
}
}
}
}
</style>
<template>
<marqueeLeft :sendVal='newItems'></marqueeLeft >
</template>
<script>
import marqueeLeft from '@/components/marquee/marquee'
export default{
data () {
return {
newItems[
{name: '张三', detail: '152****7846抽中5元电影票'},
{name: '张三', detail: '134****7866抽中5元饭票'},
{name: '张三', detail: '180****3300抽中华为新品 HUAWEI nova 4手机'}
]
}
}
}
</script>