vue實現(xiàn)可以快進后退的跑馬燈組件

更新時間：2022年04月08日 09:36:45 作者：Daheishuai

這篇文章主要為大家詳細介紹了vue編寫一個可以快進后退的跑馬燈組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue開發(fā)實現(xiàn)跑馬燈效果組件的具體代碼，供大家參考，具體內(nèi)容如下

用vue編寫一個可以快進后退的跑馬燈組件

由于業(yè)務(wù)需求，要實現(xiàn)一個會可以控制速度的跑馬燈，初開始用js的setinterval每隔幾毫秒來減取一個字符拼接到后面，效果不理想就放棄了。后查詢用js的animate這個api改造大功告成！

效果圖

組件代碼

<template>
? <div class="marquee" @mouseover="pause(true)" @mouseleave="pause()">
? ? <i
? ? ? class="marquee-btn btn-left el-icon-d-arrow-left"
? ? ? @mousedown="speedUp(true)"
? ? ? @mouseup="speedStop()"
? ? ></i>
? ? <div ref="marqueeText" class="marquee-text">
? ? ? <div v-if="itemClick">
? ? ? ? <span
? ? ? ? ? v-for="item in text.split(splitSymbol)"
? ? ? ? ? :key="item"
? ? ? ? ? @click="$emit('itemClickEvent', item)"
? ? ? ? >{{item + ' 、'}}</span>
? ? ? </div>
? ? ? <div v-else>{{text}}</div>
? ? </div>
? ? <i
? ? ? class="marquee-btn btn-right el-icon-d-arrow-right"
? ? ? @mousedown="speedUp()"
? ? ? @mouseup="speedStop()"
? ? ></i>
? </div>
</template>

<script>
export default {
? name: "marquee",
? props: {
? ? text: {
? ? ? type: String,
? ? ? required: true
? ? },
? ? speed: {
? ? ? type: Number,
? ? ? required: false,
? ? ? default: 110
? ? },
? ? // 是否每個都可以點擊觸發(fā)事件
? ? itemClick: {
? ? ? type: Boolean,
? ? ? required: false,
? ? ? default: false
? ? },
? ? // 每個觸發(fā)事件元素的分割符號
? ? splitSymbol: {
? ? ? type: String,
? ? ? required: false,
? ? ? default: ''
? ? }
? },
? data() {
? ? return {
? ? ? aniInstance: null,
? ? ? speedTimer: null
? ? };
? },
? methods: {
? ? setAnimate() {
? ? ? const contentWidth = this.$refs.marqueeText.scrollWidth;
? ? ? const keyframes = [
? ? ? ? { transform: "translateX(100%)" },
? ? ? ? { transform: `translateX(-${contentWidth}px)` }
? ? ? ];
? ? ? const animateOptions = {
? ? ? ? duration: (contentWidth / this.speed) * 1000,
? ? ? ? iterations: Infinity,
? ? ? ? easing: "linear"
? ? ? };
? ? ? this.aniInstance = document.querySelector(".marquee-text").animate(keyframes, animateOptions);
? ? },
? ? /**
? ? ?* 快進
? ? ?* @param { Boolean } isLeft 是否為左方向
? ? ?*/
? ? speedUp(isLeft = false) {
? ? ? const set = () => {
? ? ? ? if (this.aniInstance.currentTime > 0) {
? ? ? ? ? this.aniInstance.currentTime = this.aniInstance.currentTime + (isLeft ? 2000 : -2000);
? ? ? ? ? this.aniInstance.currentTime <= 0 && (this.aniInstance.currentTime = 0);
? ? ? ? }
? ? ? }
? ? ? // 鼠標單擊
? ? ? set();
? ? ? // 鼠標長按
? ? ? this.speedTimer = setInterval(() => {
? ? ? ? set()
? ? ? }, 100);
? ? },
? ? // 快進停止
? ? speedStop() {
? ? ? clearInterval(this.speedTimer);
? ? ? this.speedTimer = null;
? ? },
? ? /**
? ? ?* 暫停、播放
? ? ?* @param { Boolean } isPause 是否暫停
? ? ?*/
? ? pause(isPause = false) {
? ? ? this.aniInstance[["play", "pause"][Number(isPause)]]();
? ? }
? },
? mounted() {
? ? this.$nextTick(() => {
? ? ? this.setAnimate();
? ? });
? }
};
</script>

<style lang="less" scoped>
.marquee {
? position: relative;
? padding: 10px 0;
? overflow: hidden;
? width: 100%;
? font-size: 16px;
? color: #fff;
? background-image: linear-gradient(
? ? to left,
? ? #b9565e,
? ? #cb655a,
? ? #da7655,
? ? #e58a50,
? ? #eb9f4b
? );
? &:hover .marquee-btn {
? ? opacity: 1;
? }
}
.marquee-btn {
? position: absolute;
? top: 50%;
? transform: translateY(-50%);
? padding: 15px;
? color: #fff;
? background: rgba(1, 1, 1, 0.4);
? z-index: 999;
? cursor: pointer;
? opacity: 0;
? transition: all 0.2s linear;
}
.btn-left {
? left: 0;
}
.btn-right {
? right: 0;
}
.marquee-text {
? white-space: nowrap;
? span {
? ? &:hover {
? ? ? cursor: pointer;
? ? ? color: #2c3e50;
? ? }
? }
}
</style>

父組件代碼

<Marquee
? :text="overdueInfo.content"
? :itemClick="true"
? :speed="120"
? splitSymbol="、"
? @itemClickEvent="marqueeSearch"
? class="marquee-box__container"
></Marquee>

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

您可能感興趣的文章: