快捷導(dǎo)航

Vue跑馬燈marquee組件使用方法詳解

更新時(shí)間：2022年05月18日 17:45:53 作者：七月末丷

這篇文章主要為大家詳細(xì)介紹了Vue跑馬燈marquee組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue跑馬燈marquee組件的具體代碼，供大家參考，具體內(nèi)容如下

一、實(shí)現(xiàn)效果

二、實(shí)現(xiàn)過(guò)程

前言：最開(kāi)始用間隔器方案制作了一個(gè)跑馬燈，但是放在移動(dòng)端中會(huì)出現(xiàn)嚴(yán)重的掉幀卡頓現(xiàn)象，于是整理思路后采用transition方案制作一個(gè)從右到左的動(dòng)畫(huà)處理問(wèn)題

思路整理：

1. 過(guò)渡是需要設(shè)定時(shí)間的，但是跑馬燈中的文本可能是長(zhǎng)短不一的

解決方案：根據(jù)文本的總寬度（即文本總長(zhǎng)）設(shè)定過(guò)渡時(shí)間，假設(shè)文本寬度500px，我們將其除以50，即過(guò)渡時(shí)間為10s

原生js表示如下：

const text = document.getElementsByClassName("text")[0] ?// 文本
const textWidth = text.clientWidth ?// 文本的總寬度
const tranTime = textWidth / 50 ?// 根據(jù)文本寬度設(shè)置過(guò)渡時(shí)間
text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過(guò)渡屬性

2. 要想持續(xù)滾動(dòng)需要重復(fù)觸發(fā)滾動(dòng)的事件

解決方案：通過(guò)上文的過(guò)渡時(shí)間設(shè)定一個(gè)重復(fù)時(shí)間

原生js表示如下：

const againTime = tranTime * 1000 + 1000 ?// 重新開(kāi)始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
// 開(kāi)始滾動(dòng)
? ? function textRoll() {
? ? ? // 滾動(dòng)操作
? ? ? // ``````
? ? ? setTimeout(() => {
? ? ? ? textRoll()
? ? ? }, againTime);
? ? }

3. 接下來(lái)實(shí)現(xiàn)文本滾動(dòng)效果

1) 先將文本設(shè)定在容器最右側(cè)

2) 為文本綁定設(shè)定好的過(guò)渡屬性，例：transition: left 10s linear

3) 因?yàn)橛羞^(guò)渡屬性，此時(shí)再將文本設(shè)定到容器最左側(cè)，就會(huì)產(chǎn)生一個(gè)從右向左的移動(dòng)的過(guò)渡

原生js表示如下：

function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過(guò)渡屬性
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
? ? ? setTimeout(() => {
? ? ? ? setTimeout(() => {
? ? ? ? ? textRoll()
? ? ? ? }, 0);
? ? ? }, againTime);
? ? }

4.到目前就能有一次完整的滾動(dòng)了，接下來(lái)是定義重新滾動(dòng)

讓文本回到容器最右側(cè)，但是目前文本已經(jīng)有過(guò)渡屬性了，如果改變其left會(huì)導(dǎo)致他從左向右滾動(dòng)，所以要先清除過(guò)渡屬性，再改變其left到容器最右側(cè)，然后用一開(kāi)始設(shè)定的再次滾動(dòng)時(shí)間綁定定時(shí)器

function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過(guò)渡屬性
?
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
?
? ? ? setTimeout(() => {
? ? ? ? // 還原文本位置
? ? ? ? text.style.transition = "" ?// 還原前需清除過(guò)渡
? ? ? ? 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">如何四紀(jì)為天子，不及盧家有莫愁。</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" ?// 開(kāi)始滾動(dòng)前設(shè)定文本在容器最右側(cè)以外
? ? const tranTime = textWidth / 50 ?// 根據(jù)文本寬度設(shè)置過(guò)渡時(shí)間
? ? const againTime = tranTime * 1000 + 1000 ?// 重新開(kāi)始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
?
? ? setTimeout(() => {
? ? ? textRoll()
? ? }, 0);
?
? ? // 開(kāi)始滾動(dòng)
? ? function textRoll() {
? ? ? text.style.transition = "left " + tranTime + "s linear" ?// 滾動(dòng)前綁定過(guò)渡屬性
?
? ? ? text.style.left = -textWidth + "px" ?// 向容器最左移動(dòng)
?
? ? ? setTimeout(() => {
? ? ? ? // 還原文本位置
? ? ? ? text.style.transition = "" ?// 還原前需清除過(guò)渡
? ? ? ? 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:
? ? ? ? "海外徒聞更九州，他生未卜此生休。 空聞虎旅傳宵柝，無(wú)復(fù)雞人報(bào)曉籌。 此日六軍同駐馬，當(dāng)時(shí)七夕笑牽牛。 如何四紀(jì)為天子，不及盧家有莫愁。",
? ? ? url: "",
? ? ? textLeft: "",
? ? ? textTransition: ""
? ? };
? },
? methods: {
? ? // 跑馬燈運(yùn)作
? ? marquee() {
? ? ? const _this = this
? ? ? const wrapperWidth = this.$refs.wrapper.clientWidth; // 容器的總寬度
? ? ? const textWidth = this.$refs.text.clientWidth; // 文本的總寬度
? ? ? const transTime = textWidth / 50; // 根據(jù)文本寬度設(shè)置過(guò)渡時(shí)間
? ? ? const againTime = transTime * 1000 + 1000; // 重新開(kāi)始滾動(dòng)時(shí)間計(jì)算(動(dòng)態(tài))
?
? ? ? this.textLeft = wrapperWidth + "px"; // 開(kāi)始滾動(dòng)前設(shè)定文本在容器最右側(cè)以外
? ? ??
? ? ? setTimeout(() => {
? ? ? ? textRoll()
? ? ? }, 0);
?
? ? ? function textRoll() {
? ? ? ? _this.textTransition = "left " + transTime + "s linear"; // 滾動(dòng)前綁定過(guò)渡屬性
? ? ? ? _this.textLeft = -textWidth + "px"; // 向容器最左移動(dòng)
? ? ? ? setTimeout(() => {
? ? ? ? ? // 還原文本位置
? ? ? ? ? _this.textTransition = "none"; // 還原前需清除過(guò)渡
? ? ? ? ? _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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: