字幕横向滚动 公告内容自动横向滚动

功能： 实现文字字幕 公告内容 自动横向滚动

思路：运用滚动条和计时器

效果：

示例：

如果是动态数据，就要复制一遍 template 中 data1 的数据放 data2 这里，当数据发生改变时 data2 的数据也能实时更新。如果是静态数字可以在方法里面复制或innerHTML赋值

content中的长度大于 header 才会有滚动效果

<template>
  <div class="hello">
    <div class="header">
      <div class="content">
        <div class="data1">
          <span>世界很美</span>
          <span>你也很美</span>
          <span>天气很好</span>
          <span>你也很好</span>
        </div>
        <div class="data2">
          <span>世界很美</span>
          <span>你也很美</span>
          <span>天气很好</span>
          <span>你也很好</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      timer:null,//定时器
    }
  },
  methods:{
    scrollMove(){
      var header = document.querySelector('.header')//获取元素
      var data1 = document.querySelector('.data1')
      // var data2 = document.querySelector('.data2')//如果data1里面是静态数据可以直接如此操作。
      // data2.innerHTML = data1.innerHTML;
      this.timer = setInterval(() => {
        header.scrollLeft++;
        if(header.scrollLeft >= data1.clientWidth){
          header.scrollLeft = 0;
        }
      }, 50);
    }
  },
  mounted(){
    this.scrollMove()//挂载
  },
  destroyed(){
    clearInterval(this.timer)//销毁定时器
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<style lang="less" scoped>
.header{
  margin: auto;
  width: 200px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  background-color: cornflowerblue;
}
.content{
  width: 1200px;
  overflow: hidden;
}
.data1,.data2{
  // display: inline-block;  行内块或浮动让两个div在同一行上
  padding-right: 25px;
  float: left;
}
</style>