vue+element实现滚动公告栏效果

（自己小练习，欢迎批评指正）
思路：
1.将需要滚动的“公告内容”重复两遍，中间加空格，即：“公告内容 公告内容”
2.利用margin-left递减使公告左移
3.当第二遍公告内容移动到第一遍公告内容初始位置时，即左移动了“公告内容 ”的长度，此时margin-left恢复到初始值，即公告回到初始位置，因为第二遍目前在第一遍的初始位置，所以视觉上没有停顿4.margin-left继续递减使公告左移，回到3
（公告长度并没有超出范围时不滚动）

<template>
  <el-card class="TopCard" style="height:50px">
    <!-- 小喇叭 -->
    <i class="el-icon-chat-dot-round" style="color:#606266"/>
    <span class="tips">公告：</span>
    <!-- 滚动文字外层div，文字能展示的区域-->
    <div class="noticeBox" :style="'width:'+noticeWidth+'px;height:20px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle;margin-top:-5px'">
      <!-- 滚动div，marginLeft变化-->
      <div :style="'margin-left:'+marginLeft+'px;white-space:nowrap'">
        <span class="showNotice">{{showNotice}}</span>
        <!-- 不会展示，用来测量第二条与第一条重合时的长度 -->
        <span class="notice">{{notice}}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      // 适应屏幕分辨率
      noticeWidth: window.screen.width - 150,
      // 公告展示（过长时会重复两遍）
      showNotice: '',
      // 用于公告过长时，获取重复两遍中第一遍的长度
      notice: '',
      // 公告初始位置
      marginLeft: 100
    }
  },
  mounted () {
    this.noticeData = ['公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一公告一', '公告二']
    this.noticeData.forEach((val, index) => {
      if (index === 0) {
        this.showNotice += '【' + (index + 1) + '】' + val
      } else {
        this.showNotice += '\xa0\xa0\xa0\xa0\xa0\xa0【' + (index + 1) + '】' + val
      }
    })
    // 公告上面先赋值，再获取宽度
    setTimeout(() => {
      // 公告div长度
      var oneNoticeWidth = document.getElementsByClassName('showNotice')[0].offsetWidth
      // 公告外层div长度
      var noticeBoxWidth = document.getElementsByClassName('noticeBox')[0].offsetWidth
      // 一条公告长度太大时，才滚动
      if (oneNoticeWidth > noticeBoxWidth) {
        // 滚动公告需要将公告重复两遍进行滚动，两遍中间需要加空格
        this.notice = this.showNotice + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
        // 上面先赋值，再获取宽度
        setTimeout(() => {
          // 获取一遍加中间空格的长度，即左移时第二遍与第一遍完全重合时的长度
          var oneNoticeAddEmptyWidth = document.getElementsByClassName('notice')[0].offsetWidth
          // 公告内容重复两遍
          this.showNotice = this.notice + this.showNotice
          this.timer = setInterval(() => {
            this.marginLeft -= 1
            // 第二遍与第一遍起始位置重合时（第一条已完全移到左侧隐藏），marginLeft置0，即回到第一条
            if (this.marginLeft === (-1) * oneNoticeAddEmptyWidth) {
              this.marginLeft = 0
            }
          }, 20)
        }, 10)
      } else { //公告并没有很长时不滚动
        this.marginLeft = 0
      }
    }, 10)
  },
}
</script>
<style>
/* 公告card */
.TopCard .el-card__body{
  padding:0px 10px
}
/* 公告title */
.tips{
  line-height:50px;
  color:#606266;
  font-weight:bold
}
</style>