Vue跑马灯marquee组件使用方法详解
本文实例为大家分享了Vue跑马灯marquee组件的具体代码，供大家参考，具体内容如下
一、实现效果
二、实现过程
前言：最开始用间隔器方案制作了一个跑马灯，但是放在移动端中会出现严重的掉帧卡顿现象，于是整理思路后采用transition方案制作一个从右到左的动画处理问题
思路整理：
1. 过渡是需要设定时间的，但是跑马灯中的文本可能是长短不一的
解决方案：根据文本的总宽度（即文本总长）设定过渡时间，假设文本宽度500px，我们将其除以50，即过渡时间为10s
原生js表示如下：
const text = document.getElementsByClassName("text")[0] // 文本
const textWidth = text.clientWidth // 文本的总宽度
const tranTime = textWidth / 50 // 根据文本宽度设置过渡时间
text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性
2. 要想持续滚动需要重复触发滚动的事件
解决方案：通过上文的过渡时间设定一个重复时间
原生js表示如下：
const againTime = tranTime * 1000 + 1000 // 重新开始滚动时间计算(动态)
// 开始滚动
function textRoll() {
// 滚动操作
// ``````
setTimeout(() => {
textRoll()
}, againTime);
}
3. 接下来实现文本滚动效果
1) 先将文本设定在容器最右侧
2) 为文本绑定设定好的过渡属性，例：transition: left 10s linear
3) 因为有过渡属性，此时再将文本设定到容器最左侧，就会产生一个从右向左的移动的过渡
原生js表示如下：
function textRoll() {
text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性
text.style.left = -textWidth + "px" // 向容器最左移动
setTimeout(() => {
setTimeout(() => {
textRoll()
}, 0);
}, againTime);
}
4.到目前就能有一次完整的滚动了，接下来是定义重新滚动
让文本回到容器最右侧，但是目前文本已经有过渡属性了，如果改变其left会导致他从左向右滚动，所以要先清除过渡属性，再改变其left到容器最右侧，然后用一开始设定的再次滚动时间绑定定时器
function textRoll() {
text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性
text.style.left = -textWidth + "px" // 向容器最左移动
setTimeout(() => {
// 还原文本位置
text.style.transition = "" // 还原前需清除过渡
text.style.left = wrapperWidth + "px"
setTimeout(() => {
textRoll()
}, 0);
}, againTime);
}
三、js版本源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 60%;
height: 30px;
background-color: #000;
overflow: hidden;
position: relative;
}
.text {
color: #fff;
white-space: nowrap;
line-height: 30px;
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="text">如何四纪为天子，不及卢家有莫愁。</div>
</div>
<script>
const wrapper = document.getElementsByClassName("wrapper")[0] // 容器
const text = document.getElementsByClassName("text")[0] // 文本
const wrapperWidth = wrapper.clientWidth // 容器的总宽度
const textWidth = text.clientWidth // 文本的总宽度
text.style.left = wrapperWidth + "px" // 开始滚动前设定文本在容器最右侧以外
const tranTime = textWidth / 50 // 根据文本宽度设置过渡时间
const againTime = tranTime * 1000 + 1000 // 重新开始滚动时间计算(动态)
setTimeout(() => {
textRoll()
}, 0);
// 开始滚动
function textRoll() {
text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性
text.style.left = -textWidth + "px" // 向容器最左移动
setTimeout(() => {
// 还原文本位置
text.style.transition = "" // 还原前需清除过渡
text.style.left = wrapperWidth + "px"
setTimeout(() => {
textRoll()
}, 0);
}, againTime);
}
</script>
</body>
</html>
四、Vue组件源码
<template>
<div class="mobile-marquee">
<img src="~assets/img/home/notice/notice.png" alt="" />
<div class="mobile-marquee-wrapper" ref="wrapper">
<div
class="mobile-marquee-text"
ref="text"
:style="{ 'left': textLeft, 'transition': textTransition }"
>
{{ text }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text:
"海外徒闻更九州，他生未卜此生休。 空闻虎旅传宵柝，无复鸡人报晓筹。 此日六军同驻马，当时七夕笑牵牛。 如何四纪为天子，不及卢家有莫愁。",
url: "",
textLeft: "",
textTransition: ""
};
},
methods: {
// 跑马灯运作
marquee() {
const _this = this
const wrapperWidth = this.$refs.wrapper.clientWidth; // 容器的总宽度
const textWidth = this.$refs.text.clientWidth; // 文本的总宽度
const transTime = textWidth / 50; // 根据文本宽度设置过渡时间
const againTime = transTime * 1000 + 1000; // 重新开始滚动时间计算(动态)
this.textLeft = wrapperWidth + "px"; // 开始滚动前设定文本在容器最右侧以外
setTimeout(() => {
textRoll()
}, 0);
function textRoll() {
_this.textTransition = "left " + transTime + "s linear"; // 滚动前绑定过渡属性
_this.textLeft = -textWidth + "px"; // 向容器最左移动
setTimeout(() => {
// 还原文本位置
_this.textTransition = "none"; // 还原前需清除过渡
_this.textLeft = wrapperWidth + "px";
setTimeout(() => {
textRoll();
}, 0);
}, againTime);
}
},
},
mounted() {
this.marquee();
}
};
</script>
<style>
.mobile-marquee {
display: flex;
align-items: center;
height: 40px;
margin: 0 16px;
}
.mobile-marquee-wrapper {
flex: 1;
height: 40px;
overflow: hidden;
position: relative;
}
.mobile-marquee img {
width: 14px;
height: 12px;
margin-right: 7px;
}
.mobile-marquee-text {
color: #333;
white-space: nowrap;
line-height: 40px;
position: absolute;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现简单的跑马灯效果
本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html <div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div> vue var app = new
-
Js和VUE实现跑马灯效果
本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring
-
vue实现无缝轮播效果（跑马灯）
本文实例为大家分享了vue实现无缝轮播效果的具体代码,供大家参考,具体内容如下 1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue; 2.将两个组件引入页面,Sweiper.vue中用v-model传参(v-model 其实是语法糖,默认属性value和默认事件input): 代码中我是通过v-model的selcted将值传给Sweiper(子组件),自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件 3.核心是要让selected的值传到Swei
-
Vue实现跑马灯效果
本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1.给[嗨起来]按钮,绑定一个点击事件 v-on(@). 2.在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置. 3.为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中. 实现代码如下: <!DOCTYPE html> <html lang="en"> <he
-
Vue 使用计时器实现跑马灯效果的实例代码
Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="
-
Vue实现跑马灯样式文字横向滚动
本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1.可以自己封装一个组件,也可以自己写,也可以复制以下代码 2.封装完成以后要在所需的组件中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee
-
基于Vue的文字跑马灯组件(npm 组件包)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac
-
Vue实现跑马灯简单效果
本文实例为大家分享了Vue实现跑马灯简单效果的具体代码,供大家参考,具体内容如下 1.跑马灯效果 说明:单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动 2.完整代码 (注意:代码中需要引入vue.js文件,这个文件自己根据目录位置引入,具体位置代码中有注释) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q
-
Vue实现简单的跑马灯
Vue实现滚动字条/跑马灯,供大家参考,具体内容如下 内容不多,直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../资料/js/vue.js"></script> <!-- 引入V
-
vue实现简单跑马灯效果
本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 如下图片,会自行向 上"滚动" 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn.bootcss.com/