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

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

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

效果：

示例：

?

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

?

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<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>