vue跑马灯实现

鼠标放上去可暂停，当前实现版本是字数长度要超过外层div才会滚动

父界面：

<template>
    <div>
        <el-card style="width: 97%;margin-top: 10px;margin-left: 22px;" >
           <marque style="width: 100%;height: 30px;color: red;font-size: 18px;margin-left: 10px;"  :lists="['这是一个很长很长很长的跑马灯']" ></marque>
        </el-card>
    </div>
</template>
<script>
　　import marque from '@/components/marque'

　　export default {
      components: {
　　　　　　marque
　　　　}
　　}
</script

子界面，（跑马灯组件）

 1 <template>
 2     <div class="marquee-wrap" @mouseover='stopInter' @mouseleave='startInter'>
 3         <!-- 滚动内容 -->
 4         <div class="scroll" style=" text-shadow:#ffc773 0 1px 8px;color: #ed5736;">
 5             <p class="marquee">{{text}}</p>
 6             <!-- 文字副本 -->
 7             <p class="copy"></p>
 8         </div>
 9         <!-- 为了计算总文本宽度，通过css在页面中隐藏 -->
10         <p class="getWidth">{{text}}</p>
11     </div>
12 </template>
13 
14 <script>
15     export default {
16         props: ['lists'], // 父组件传过来的数组
17         data () {
18             return {
19                 timer: null,
20                 text: '',
21                 intervalStop: false
22             }
23         },
24         created () {
25             // 进入页面等一秒才开始滑动
26             let timer = setTimeout(() => {
27                 this.move()
28                 clearTimeout(timer)
29             }, 1000)
30         },
31         // 把父组件传入的arr转化成字符串， 本次是传入一个，在此处重复了三次来获取足够的长度
32         mounted () {
33             for (let item of this.lists) {
34                 this.text += ' ' + item + `      ` + item + `      `+ item
35             }
36         },
37         methods: {
38             stopInter() {
39                 this.intervalStop = true;
40             },
41             startInter() {
42                 this.intervalStop = false;
43             },
44             move () {
45                 let maxWidth = document.querySelector('.marquee-wrap').clientWidth
46                 // 获取文字text 的计算后宽度 （由于overflow的存在，直接获取不到，需要独立的node计算）
47                 let width = document.querySelector('.getWidth').scrollWidth
48                 // 如果文本内容的宽度小于页面宽度，则表示文字小于等于一行，则不需要滚动
49                 if (width <= maxWidth) return
50                 let scroll = document.querySelector('.scroll')
51                 let copy = document.querySelector('.copy')
52                 copy.innerText = this.text // 文字副本填充
53                 let distance = 0 // 位移距离
54                 // 设置位移
55                 this.timer = setInterval(() => {
56                     if (!this.intervalStop) {
57                         distance -= 1
58                         // 如果位移超过文字宽度，则回到起点
59                         if (-distance >= width) {
60                             distance = 10 // 距离必须与marquee的margin宽度相同
61                         }
62                         scroll.style.transform = 'translateX(' + distance + 'px)'
63                     }
64                 }, 20)
65             }
66         },
67         beforeDestroy () {
68             // 清除计时器
69             clearInterval(this.timer)
70         }
71     }
72 </script>
73 <style scoped lang='less'>
74     .marquee-wrap {
75         width: 100%;
76         overflow: hidden;
77         position: relative;
78         .scroll {
79             display: flex;
80             p{
81                 word-break:keep-all; // 不换行
82                 white-space:nowrap;
83                 /* 设置前后间隔 */
84                 &.marquee {
85                     margin-right: 32px;
86                 }
87             }
88         }
89         /* 仅为了获取宽度，故隐藏掉 */
90         .getWidth {
91             word-break:keep-all; // 不换行
92             white-space:nowrap;
93             position: absolute;
94             opacity: 0;
95             top: 0;
96         }
97     }
98 </style>

参考：https://blog.csdn.net/weixin_43931876/article/details/90046945

猜你喜欢