<template>
<div class="my-outbox">
? <div class="my-inbox" ref='box'>
? ? <div class="my-list" :style="note" v-for="(item,index) in sendVal" :key='index' ref='list'>
? ? ? <!--{{item.name}}剛剛購買了產(chǎn)品-->
? ? ? <span class="my-uname">{{item.detail}}</span>
? ? </div>
? </div>
</div>
</template>

<script>
export default {
? name: 'my-marquee-left',
? props: {
? ?
? ? sendVal:{
? ? ? ? type:Array,
? ? ? ? default:[]
? ? }
? },
? data () {
? ? return {
? ? ? ? note: {
? ? ? ? backgroundImage:
? ? ? ? ? "url(" + require("../../../static/images/common/msg.png") + ")",
? ? ? ? backgroundSize: "20px 20px",
? ? ? ? backgroundRepeat: "no-repeat",
? ? ? ? backgroundPosition:"1% ?50%"
? ? ? },
? ? ? // 定時(shí)器標(biāo)識
? ? ? nowTime: null,
? ? ? // 每一個(gè)內(nèi)容的寬度
? ? ? disArr: []
? ? }
? },
? mounted () {
? ? // var that = this
? ? var item = this.$refs.list
? ? var len = this.sendVal.length
? ? var arr = []
? ? // 因?yàn)樵O(shè)置的margin值一樣，所以取第一個(gè)就行。
? ? var margin = this.getMargin(item[0])
? ? for (var i = 0; i < len; i++) {
? ? ? arr.push(item[i].clientWidth + margin) // 把寬度和 margin 加起來就是每一個(gè)元素需要移動(dòng)的距離
? ? }
? ? this.disArr = arr
? ? this.moveLeft()
? },
? beforeDestroy () {
? ? // 頁面關(guān)閉清除定時(shí)器
? ? clearInterval(this.nowTime)
? ? // 清除定時(shí)器標(biāo)識
? ? this.nowTime = null
? },
? methods: {
? ? // 獲取margin屬性
? ? getMargin (obj) {
? ? ? var marg = window.getComputedStyle(obj, null)['margin-right']
? ? ? marg = marg.replace('px', '')
? ? ? return Number(marg) // 強(qiáng)制轉(zhuǎn)化成數(shù)字
? ? },
? ? // 移動(dòng)的方法
? ? 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
? ? ? ? // console.log('初始化移動(dòng)：', startDis)
? ? ? ? if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
? ? ? ? ? // 每次移動(dòng)完一個(gè)元素的距離，就把這個(gè)元素的寬度
? ? ? ? ? that.disArr.push(that.disArr.shift())
? ? ? ? ? // 每次移動(dòng)完一個(gè)元素的距離，就把列表數(shù)據(jù)的第一項(xiàng)放到最后一項(xiàng)
? ? ? ? ? // console.log('that.sendVal: ', that.sendVal)
? ? ? ? ? // console.log('that.sendVal: ', that.sendVal.shift())
? ? ? ? ? that.sendVal.push(that.sendVal.shift())
? ? ? ? ? startDis = 0
? ? ? ? ? // console.log('移動(dòng)')
? ? ? ? } else {
? ? ? ? ? // console.log('不來不來就不來...')
? ? ? ? }
? ? ? ? // 每次都讓盒子移動(dòng)指定的距離，在我自己做的項(xiàng)目中，這種字符串拼接的方法并沒有生效
? ? ? ? // outbox.style = 'transform: translateX3d(' + startDis + 'px)'?
? ? ? ? // 后面換了es6的模板字符串就可以了
? ? ? ? outbox.style = `transform: translateX(${startDis}px)`
? ? ? ? // outbox.style = 'transform: translateX(\' + startDis + \' px)'
? ? ? ? // outbox.style.marginLeft = 'startDis'
? ? ? ? // console.log('這里:', startDis)
? ? ? }, 1000 / 60)
? ? }
? }
}
</script>

<style lang="less" scoped>
.my-outbox{
? /*color: #D7BC8D;*/
? overflow: hidden;
? color: #FFFFFF;
? height: 35px;
? /*background: #422b02;*/
? .my-inbox{
? ? white-space: nowrap;
? ? .my-list{
? ? ? margin-right: 100px;
? ? ? display: inline-block;
? ? ? font-size: 14px;
? ? ? // height: 20px;
? ? ? text-indent:30px;
? ? ? line-height: 40px;
? ? ? .my-uname{
? ? ? ? /*color: #FF8900;*/
? ? ? ? color: #FFFFFF;
? ? ? }
? ? }
? }
}
</style>

<div class="messageBox">
? ? ? <marqueeLeft :sendVal="newsList"></marqueeLeft>
</div>

import marqueeLeft from "./marqueeX";

export default {
? data() {
? ? return {
? ? ? newsList: [
? ? ? ? {
? ? ? ? ? name: "張三1",
? ? ? ? ? detail:
? ? ? ? ? ? "信息公告：2020年10月14限公司成立，我行用信金額111111元",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "張三2",
? ? ? ? ? detail:
? ? ? ? ? ? "信息公告：2020年9月30大幅度發(fā)大發(fā)的，我行用信金額222222元",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "張三3",
? ? ? ? ? detail:
? ? ? ? ? ? "信息公告：2020年12月有限公司成立，我行用信金額333333元",
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: "張三4",
? ? ? ? ? detail:
? ? ? ? ? ? "信息公告：2020年8月31有限公司成立，我行用信金額444444元",
? ? ? ? },
? ? ? ],
? ? };
? },
? components: {
? ? marqueeLeft,
? },

.messageBox {
? width: 60%;
? overflow: hidden;
}