Vue实现跑马灯样式文字横向滚动
本文实例为大家分享了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>
接下来就是效果图:
为了效果看的更明显多截了几张
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)