src/components/orderMessage/index.vue

<template>
  <div class="app-orderMessageBox" ref="app_orderMessageBox">
    <div class="theme-card">
      <div class="title"><span>订单消息</span></div>
      <div class="content">
        <ul class="news-wrap">
          <li class="orderNum">订单编号</li>
          <li class="orderPark">停车场</li>
          <li class="orderMoney">收费金额</li>
        </ul>
        <div class="nwwest-roll  news-wrap" id="nwwest-roll">
          <ul id="roll-ul">
            <li v-for="(item,index) in list" ref="rollul" :class="{anim:animate==true}" :key="index">
              <div :title="item.orderId">{{item.orderId}}</div>
              <div :title="item.plName">{{item.plName}}</div>
              <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { msgAddress } from '../../api/api'
  export default {
    name: "orderMessage",
    data() {
      return {
        orderList:"",//公告列表
        //marqueeHeight: '100%',
        name: '订单公告',
        animate: true,
        list: []
      }
    },
    created() {
      this.onLoad()
    },
    methods: {
      onLoad() {
        msgAddress({
          orgIds: this.GLOBAL.paramsvariables
        }).then((response)=>{
          let  data = response.data.data
          this.list = data;
          setInterval(this.scroll, 2000)
        }).catch((response)=>{
          console.log(response);
        })
      },
      scroll() {
        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function () {
          that.list.push(that.list[0]);
          that.list.shift();
          that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 0)
      }
    },
    filters:{
      formatMoney: function (value) {
        return (value/100).toFixed(2)+' 元'
      }
    }
  }
</script>
<style scoped  lang="scss">
  .app-orderMessageBox {
    width: 100%;
    .content{
      padding: 0;
    }
    .theme-card{
      height: 100%;
    }
    .news-wrap{
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      li{
        height: 40px;
        float: left;
        padding-left: 0;
        padding-left: 30px;
        background-size: 14px 14px;
        background-position: 10px center;
        background-repeat: no-repeat;
        list-style: none;
        overflow: hidden;
      }
      .orderNum{
        width: 80px;
        background-image: url(../../images/com/orderNum.svg) ;
      }
      .orderMoney{
        width: 80px;
        background-image: url(../../images/com/orderMoney.svg) ;
      }
      .orderPark{
        width: calc(100% - 250px);
        background-image: url(../../images/com/orderPark.svg) ;
      }
    }
    .nwwest-roll {
      width: 100%;
      height: calc(100% - 60px);
      overflow: hidden;
      transition: all 0.5s;
      li{
        width: 100%;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        padding-left: 10px;
        color: #fff;
        background:rgba(255,255,255,.1);
        margin-bottom: 10px;
          div{
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:nth-of-type(1){
              width: 110px;
            }
            &:nth-of-type(2){
              width: calc(100% - 220px);
            }
            &:nth-of-type(3){
              width: 80px;
            }
          }
      }
    }
  }
  .anim {
     transition: all 0.5s;
  }
</style>