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

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

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

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

一、實現(xiàn)效果

二、實現(xiàn)過程

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

思路整理：

1. 過渡是需要設定時間的，但是跑馬燈中的文本可能是長短不一的

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

原生js表示如下：

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

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

解決方案：通過上文的過渡時間設定一個重復時間

原生js表示如下：

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

3. 接下來實現(xiàn)文本滾動效果

1) 先將文本設定在容器最右側

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

3) 因為有過渡屬性，此時再將文本設定到容器最左側，就會產(chǎn)生一個從右向左的移動的過渡

原生js表示如下：

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

4.到目前就能有一次完整的滾動了，接下來是定義重新滾動

讓文本回到容器最右側，但是目前文本已經(jīng)有過渡屬性了，如果改變其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 ?// 根據(jù)文本寬度設置過渡時間
? ? const againTime = tranTime * 1000 + 1000 ?// 重新開始滾動時間計算(動態(tài))
?
? ? 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; // 根據(jù)文本寬度設置過渡時間
? ? ? const againTime = transTime * 1000 + 1000; // 重新開始滾動時間計算(動態(tài))
?
? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: