src/views/newssection.vue

<template>
  <div >
    <titlesection title="消息"></titlesection>
    <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" class="roll-ul" :style="{ top }">
          <li v-for="(item,index) in list" ref="rollul"  :key="index">
            <div :title="item.carNumber">{{item.carNumber}}</div>
            <div :title="item.plName">{{item.plName}}</div>
            <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import titlesection from '../components/titlesection'
import { msgAddress } from '../api/api'
export default {
  name: 'newssection',
  components: {
    titlesection
  },
  data() {
    return {
      orderList:"",//公告列表
      //marqueeHeight: '100%',
      name: '订单公告',
      activeIndex: 0,
      intnum: undefined,
      list: []
    }
  },
  computed: {
    top() {
      return - this.activeIndex * 31 + 'px';
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      msgAddress({
        orgIds: this.GLOBAL.paramsvariables
      }).then((response)=>{
        let  data = response.data.data
        console.log(data)
        this.list = data;
        var that = this
        this.intnum = setInterval(_ => {
          that.list.push(that.list[this.activeIndex]);
          this.activeIndex += 1;
        }, 1000);
      }).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 lang="scss" scoped>
    .content{
      height: calc(100% - 30px);
    }
    .theme-card{
      height: 100%;
    }
    .news-wrap{
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      .roll-ul{
        height: 100%;
        position: relative;
        transition: top 0.5s;
      }
      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;
        color: #fff;
      }
      .orderNum{
        width: 90px;
        background-image: url(../assets/img/orderNum.svg) ;
      }
      .orderMoney{
        width: 70px;
        background-image: url(../assets/img/orderMoney.svg) ;
      }
      .orderPark{
        width: calc(100% - 170px);
        background-image: url(../assets/img/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: 5px;
        div{
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:nth-of-type(1){
            width: 90px;
          }
          &:nth-of-type(2){
            width: calc(100% - 160px);
          }
          &:nth-of-type(3){
            width: 70px;
          }
        }
      }
    }
  .anim {
     transition: all 0.5s;
  }
</style>