BJ_web_developers / dyitoc

  <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.orderId">{{item.orderId}}</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 * 36 + 'px';

      }
    },
    created() {

      this.onLoad()

    },
    methods: {

      onLoad() {
        msgAddress({
          orgIds: this.GLOBAL.paramsvariables
        }).then((response)=>{
          let  data = response.data.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: 110px;
          background-image: url(../assets/img/orderNum.svg) ;
        }
        .orderMoney{
          width: 80px;
          background-image: url(../assets/img/orderMoney.svg) ;
        }
        .orderPark{
          width: calc(100% - 230px);
          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: 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>