原生标签实现无限滚动公告

<template>
  <div style="vertical-align: middle;display:inline-block">
    <div
      v-if="notice"
      class="no-data-background system-broadcast arrow-dialog arrow-dialog-broadcast"
    >
      <div class="arrow" />
      <marquee
        scrollamount="4"
        on-mouseover="this.stop()"
        on-mouseout="this.start()"
      >
        <i class="fa fa-volume-up" />&nbsp;{{ notice }}
      </marquee>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        notice:'',
        token:0
      }
    },
    created() {
      if(!this.token){
        this.getNewestNotice()
        this.token = setInterval(this.getNewestNotice,30000)
      }
    },
    methods: {
        getNewestNotice () {
           // 读取数据
        },
      },
  }
</script>
<style scoped>
    .arrow-dialog.arrow-dialog-broadcast {
        /*background-color: #f5f5fa; */
        border-style: solid;
        /*border-color: #b1b1b1;*/
        border-color: #d1d1d1;
        position: relative;
        height: 28px;
        width: 200px;
        border-width: 1px;
        float: left;
        margin-top: 19px;
        /* color: #415b94; */
        padding: 0 5px;
        border-radius: 5px;
        font-size: 13px;
        color:#222;
    }

    .arrow-dialog.arrow-dialog-broadcast .arrow {
        border-left-color: #cccccd;
        transform: translate(0,-50%);
        left: 100%;
        border-top-width: 5px;
        border-bottom-width: 5px;
        border-left-width: 5px;
    }
    .arrow-dialog.arrow-dialog-broadcast .arrow:after {
        content: '';
        height: 0;
        width: 0;
        border-left-color: #f5f5fa;
        transform: translate(0,-50%);
        /*border-top-width: 2.59px;*/
        /*border-bottom-width: 2.59px;*/
        /*border-left-width: 2.59px;*/
        /*margin-left: -5px;*/
        border-top-width: 3px;
        border-bottom-width: 3px;
        border-left-width: 3px;
        margin-left: -5px;
    }
    .arrow-dialog.arrow-dialog-broadcast .arrow, .arrow-dialog.arrow-dialog-broadcast .arrow:after {
        border-top-style: solid;
        border-top-color: transparent;
        border-right: none;
        border-bottom-style: solid;
        border-bottom-color: transparent;
        border-left-style: solid;
        position: absolute;
        top: 50%;
        display: block;
    }
    .arrow {
        z-index: 99;
    }
    .arrow-dialog.arrow-dialog-broadcast marquee {
        height: 100%;
        line-height: 28px;
    }
</style>

备注：鼠标移入触发方法最好不要自己写入标签

扩展：实时更新问题

1.定时器触发：过度触发问题；

2.websocket即使通讯：通常在H5游戏中使用