Vue实现跑马灯样式文字横向滚动
程序员文章站
2022-09-16 23:18:48
本文实例为大家分享了vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下需求:在vue项目的顶部,来实现文字左右滚动步骤:1、可以自己封装一个组件,也可以自己写,也可以复制以下代码2、...
本文实例为大家分享了vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下
需求:
在vue项目的顶部,来实现文字左右滚动
步骤:
1、可以自己封装一个组件,也可以自己写,也可以复制以下代码
2、封装完成以后要在所需的组件中引入,注册,并使用
代码:
封装一个专门用来实现跑马灯效果的组件marquee组件
<template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <p class="marquee">{{text}}</p> <p class="copy" ref="copy"></p> </div> <p class="getwidth" ref="getwidth">{{text}}</p> </div> </template> <script> export default { name: 'marquee', props: ['val'], data () { return { timer: null, text: '' } }, created () { let timer = settimeout(() => { this.move() cleartimeout(timer) }, 1000) }, mounted () { for (let item of this.val) { this.text += item } }, methods: { move () { let maxwidth = this.$refs['marquee-wrap'].clientwidth let width = this.$refs['getwidth'].scrollwidth if (width <= maxwidth) return let scroll = this.$refs['scroll'] let copy = this.$refs['copy'] copy.innertext = this.text let distance = 0 this.timer = setinterval(() => { distance -= 1 if (-distance >= width) { distance = 16 } scroll.style.transform = 'translatex(' + distance + 'px)' }, 20) } }, beforedestroy () { clearinterval(this.timer) } } </script> <style scoped> .marquee-wrap { width: 100%; overflow: hidden; position: relative; } .marquee{ margin-right: 0.16rem; } p { word-break:keep-all; white-space: nowrap; font-size: 0.28rem; } .scroll { display: flex; } .getwidth { word-break:keep-all; white-space:nowrap; position: absolute; opacity: 0; top: 0; } </style>
在哪个组件中使用,就引入
// 引入跑马灯组件 import marquee from "@/components/marquee/marquee.vue";
引用并注册
export default { components: { // 注册跑马灯组件 marquee, }, }
注册完成以后接下来就是html样式了,在template模板中使用这个组件
<marquee class="realdata"> <ul class="fa-scroll-cont"> <li v-for="item in realdata" :key="item.name"> <span class="roll-text">{{ item.city }}</span> </li> </ul> </marquee>
接下来就是效果图:
为了效果看的更明显多截了几张
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 他们投降了
下一篇: js闭包学习心得总结