前端开发攻略---用Vue实现无限滚动的几种方法

目录

1、原理

2、使用CSS动画

代码：

3、使用JS实现

代码：

1、原理

  1. 复制内容：将需要滚动的内容复制一次，并将这些副本放置在原始内容的后面。这样，当用户滚动到内容的末尾时，就会无缝地切换回到内容的起始位置。

  2. 动画滚动：使用 CSS 或 JavaScript 动画来滚动内容。通常，通过改变元素的位置（例如使用 transform 属性的 translate 函数）来实现滚动效果。

  3. 无限循环：当滚动到最后一个复制的内容时，将滚动位置重新设置为内容的起始位置，以创建无限循环的效果。这通常需要检测滚动位置，并在必要时进行调整。

  4. 控制滚动：根据用户的交互（例如鼠标移入/移出、滚动等），控制滚动的开始和暂停。这通常涉及使用事件处理程序来监听用户的交互，并相应地调整滚动的状态。

2、使用CSS动画

优点：

  1. 性能优化： CSS 动画通常会通过浏览器的硬件加速来执行，因此在性能方面可能更有效率。
  2. 简单易用： 使用 CSS 实现无限滚动通常比使用 JavaScript 更简单，并且可以通过几行 CSS 代码就能实现基本的效果。
  3. 响应式设计： CSS 可以轻松实现响应式设计，使得滚动效果在不同设备上具有一致的表现。
  4. 动画流畅性： 使用 CSS 实现的动画通常更加平滑，因为浏览器会根据自身的渲染节奏来处理动画效果。

缺点：

  1. 功能受限： 使用 CSS 实现的滚动效果通常比较基础，功能上受到一定的限制，例如无法实现复杂的动态交互或逻辑控制。
  2. 浏览器兼容性： 某些高级的 CSS 特性可能不被一些旧版本的浏览器所支持，这可能会导致在一些浏览器上无法正常显示滚动效果。
  3. 难以调试： 对于复杂的 CSS 动画效果，调试起来可能相对困难，特别是涉及到交互逻辑时。
  4. 性能消耗： 虽然 CSS 动画通常有较好的性能，但对于复杂的动画效果，可能会引起页面的重绘和重排，导致性能下降。

难受的点：当滚动容器内的元素使用了margin值，动画每结束一次就会抖动一次

代码：

<template>
  <div class="aaa">
    <div class="box">
      <ul>
        <li v-for="item in 2">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

</script>

<style scoped lang="scss">
.aaa{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .box {
    width: 1050px;
    height: 300px;
    overflow: hidden;
    ul {
      width: 200%;
      height: 100%;
      animation: scroll 2s linear infinite;

      & > li {
        width: 1050px;
        background-color: rgb(255, 255, 255);
        height: 100%;
        float: left;
        list-style: none;
        display: flex;
        & > div {
          width: 200px;
          height: 100%;
          margin-right: 10px;
        }
        & > div:nth-child(1) {
          background-color: saddlebrown;
        }
        & > div:nth-child(2) {
          background-color: rgb(238, 254, 0);
        }
        & > div:nth-child(3) {
          background-color: rgb(34, 255, 5);
        }
        & > div:nth-child(4) {
          background-color: rgb(10, 194, 235);
        }
        & > div:nth-child(5) {
          background-color: rgb(50, 9, 215);
        }
      }
    }
    ul:hover {
      animation-play-state: paused;
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-780px);
      }
    }
  }
}
</style>

3、使用JS实现

优点：

  1. 灵活性： 使用 JavaScript 实现无限滚动效果可以更灵活地控制动画的行为，包括速度、加速度、缓动效果等，以及根据用户交互进行动态调整。
  2. 功能丰富： JavaScript 提供了丰富的 API 和库，可以实现复杂的交互效果和逻辑控制，使得滚动效果更具创意和个性化。
  3. 兼容性： JavaScript 可以在几乎所有现代浏览器中运行，因此更具有跨浏览器兼容性。
  4. 调试方便： 使用 JavaScript 编写的动画代码通常更易于调试，因为可以通过控制台输出、断点调试等方式进行调试。

缺点：

  1. 性能消耗： JavaScript 动画可能会消耗更多的 CPU 和内存资源，尤其是对于复杂的动画效果或需要频繁计算的情况。
  2. 编码复杂度： 相对于使用 CSS 实现，使用 JavaScript 实现动画通常需要更多的编码工作，因为需要处理更多的逻辑和交互细节。
  3. 性能不稳定： 由于 JavaScript 是单线程执行的，当 JavaScript 代码执行时间过长或执行过程中阻塞了主线程，可能会导致页面卡顿或动画不流畅的问题。
  4. 兼容性问题： 某些低版本或旧版浏览器可能不支持或支持不完整某些 JavaScript 特性，导致在这些浏览器上无法正常运行动画效果。

代码：

<template>
  <div class="aaa">
    <div class="box">
      <ul ref="ulDom" @mouseenter="pause" @mouseleave="resume">
        <li v-for="item in 2">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const ulDom = ref(null)
let animationId = null
let isPaused = false

onMounted(() => {
  animation()
})
const pause = () => {
  cancelAnimationFrame(animationId)
  isPaused = true
}

const resume = () => {
  if (!isPaused) return
  animationId = requestAnimationFrame(animation)
  isPaused = false
}
let position = 0
const animation = () => {
  const ulWidth = ulDom.value.offsetWidth
  const animate = () => {
    position -= 10
    if (position <= -(ulWidth / 2)) {
      position = 0
    }
    ulDom.value.style.transform = `translateX(${position}px)`
    animationId = requestAnimationFrame(animate)
  }
  animate()
}
</script>

<style scoped lang="scss">
.aaa{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .box {
    width: 1050px;
    height: 300px;
    overflow: hidden;
    ul {
      width: 200%;
      height: 100%;
      & > li {
        width: 1050px;
        background-color: rgb(255, 255, 255);
        height: 100%;
        float: left;
        list-style: none;
        display: flex;
        & > div {
          width: 200px;
          height: 100%;
          margin-right: 10px;
        }
        & > div:nth-child(1) {
          background-color: saddlebrown;
        }
        & > div:nth-child(2) {
          background-color: rgb(238, 254, 0);
        }
        & > div:nth-child(3) {
          background-color: rgb(34, 255, 5);
        }
        & > div:nth-child(4) {
          background-color: rgb(10, 194, 235);
        }
        & > div:nth-child(5) {
          background-color: rgb(50, 9, 215);
        }
      }
    }
  }
}
</style>

 代码解释：

  1. 引入依赖：

    • 使用了 Vue 3 的 ref 和 onMounted 函数来创建响应式数据和在组件挂载后执行动画。

  2. 初始化变量：

    • ulDom：通过 ref 创建的引用，指向 <ul> 元素，用于获取其宽度以及控制动画。
    • animationId：用于存储动画帧的 ID，方便后续取消动画。
    • isPaused：用于记录动画是否处于暂停状态。

  3. 初始化动画 (onMounted 钩子)：

    • 调用 animation 函数启动动画。

  4. 暂停和继续动画：

    • pause 方法：取消当前动画帧的执行，并将 isPaused 标志设置为 true，表示动画暂停。
    • resume 方法：如果动画没有处于暂停状态，则重新启动动画。

  5. 动画逻辑 (animation 函数)：

    • 获取 <ul> 元素的宽度，以便在动画中使用。
    • 定义 animate 函数，该函数负责实际的动画逻辑。
    • 在 animate 函数中，每帧向左移动 10px，直到移动到一半宽度的位置时，将位置重置为 0，从而实现无限滚动的效果。
    • 使用 requestAnimationFrame 来实现流畅的动画效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/642752.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

链表-设计LRU缓存结构

链表-设计LRU缓存结构

题目描述&#xff1a; 代码实现&#xff1a;这里记录了根据LRU算法原理最直接理解的代码实现。 import java.util.*;//存储输入内容&#xff0c;记录访问权值 class CounterInfo {int key;int value;int times;//代表key对应的权值&#xff0c;值越小优先级越高public Counter…
阅读更多...
【学习笔记】Webpack5（Ⅱ）

【学习笔记】Webpack5（Ⅱ）

Webpack 3、高级篇 3.1、提升开发体验 —— SourceMap 3.2、提升打包速度 3.2.1 HotModuleReplacement 3.2.2 OneOf 3.2.3 Include / Exclude 3.2.4 Cache 3.2.5 Thread 3.3、减少代码体积 …
阅读更多...
Strategy设计模式

Strategy设计模式

Strategy设计模式举例。 看图&#xff1a; 代码实现&#xff1a; #include <iostream>using namespace std;class FlyBehavior { public:virtual void fly() 0; };class QuackBehavior { public:virtual void quack() 0; };class FlyWithWings :public FlyBehavior …
阅读更多...
轻量级 K8S 环境 安装minikube

轻量级 K8S 环境 安装minikube

文章目录 操作系统DockerDocker CE 镜像源站使用官方安装脚本自动安装 &#xff08;仅适用于公网环境&#xff09;安装校验Docker代理docker permission denied while trying to connect to the Docker daemon socket minikubekubectl工具minikube dashboard参考资料 操作系统 …
阅读更多...
WORD、PPT技巧

WORD、PPT技巧

WORD技巧 编辑设置 word标题导航窗口怎么调出word2016&#xff0c;缩小了页面&#xff0c;可是怎么是竖着的一页一页排列啊&#xff1f;以前不是好几页横排着的么&#xff1f;怎么设置&#xff0c;求救&#xff1a;在Word标题栏那一行找到“视图”&#xff0c;点击“显示比例…
阅读更多...
刷题之路径总和Ⅲ（leetcode）

刷题之路径总和Ⅲ（leetcode）

路径总和Ⅲ 这题和和《为K的数组》思路一致&#xff0c;也是用前缀表。 代码调试过&#xff0c;所以还加一部分用前序遍历数组和中序遍历数组构造二叉树的代码。 #include<vector> #include<unordered_map> #include<iostream> using namespace std; //Def…
阅读更多...
HCIE是什么证书？为什么要考？

HCIE是什么证书？为什么要考？

每当我发一些关于HCIE的话题时&#xff0c;总有小伙伴过来问“啥是HCIE啊&#xff1f;”今天就一起来了解下&#xff0c;到底什么是HCIE&#xff1f;为什么这么多人都要考HCIE? HCIE是华为认证ICT专家的缩写&#xff0c;它是华为认证体系中最高级别的ICT技术认证。HCIE全称为H…
阅读更多...
JUnit5禁用测试用例

JUnit5禁用测试用例

什么是禁用测试用例&#xff1a; 给用例添加禁用标识被禁用的用例执行后会添加跳过的状态可以禁用测试类、也可以禁用测试方法 使用场景&#xff1a; 在bug未解决之前&#xff0c;对应的测试用例则无需执行版本更新&#xff0c;某些用例暂时不可以 Disable注解&#xff1a;…
阅读更多...
【Andoird开发】android获取蓝牙权限，搜索蓝牙设备MAC

【Andoird开发】android获取蓝牙权限，搜索蓝牙设备MAC

<!-- Android 12以下才需要定位权限&#xff0c; Android 9以下官方建议申请ACCESS_COARSE_LOCATION --><uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name"android.permission.ACCES…
阅读更多...
可视化 | Seaborn中的矩阵图及示例

可视化 | Seaborn中的矩阵图及示例

Seaborn是python提供的一个很棒的可视化库。它有几种类型的绘图&#xff0c;通过这些绘图&#xff0c;它提供了惊人的可视化能力。其中一些包括计数图&#xff0c;散点图&#xff0c;配对图&#xff0c;回归图&#xff0c;矩阵图等等。本文讨论了Seaborn中的矩阵图。 示例1&am…
阅读更多...
微软密谋超级AI大模型！LangChain带你轻松玩转大模型开发

微软密谋超级AI大模型！LangChain带你轻松玩转大模型开发

此前&#xff0c;据相关媒体报道&#xff0c;微软正在研发一款名为MAI-1的最新AI大模型&#xff0c;其参数规模或将达5000亿以上&#xff0c;远超此前微软推出的相关开源模型&#xff0c;其性能或能与谷歌的Gemini 1.5、Anthropic的Claude 3和OpenAI的GPT-4等知名大模型相匹敌。…
阅读更多...
AI PC 的曙光：微软大胆出击与苹果竞争

AI PC 的曙光：微软大胆出击与苹果竞争

AI PC 的曙光&#xff1a;微软大胆出击与苹果竞争 AI PC 的曙光&#xff1a;微软大胆出击与苹果竞争 概述 微软已正式进入 AI PC 时代&#xff0c;并且毫不避讳地直接向苹果的 MacBook 发起攻击。随着代号为“Copilot”的笔记本电脑的推出&#xff0c;微软准备彻底改变我们与…
阅读更多...
vue 表格表头展示不下，显示。。。；鼠标悬浮展示全部

vue 表格表头展示不下，显示。。。；鼠标悬浮展示全部

vue 表格表头展示不下&#xff0c;显示。。。&#xff1b;鼠标悬浮展示全部 <templateslot-scope"scope"slot"header"><span:title"临时证券类型"style"white-space:nowrap">{{ 临时证券类型 }}</span></templa…
阅读更多...
01_尚硅谷JavaWeb最新版笔记

01_尚硅谷JavaWeb最新版笔记

尚硅谷JAVAWEB概述 课程概述 计划学习时间&#xff1a;1周以内
阅读更多...
动物合并消除休闲游戏源码 Animal Merge 益智游戏

动物合并消除休闲游戏源码 Animal Merge 益智游戏

一款动物合并消除休闲游戏源码&#xff0c;Animal Merge是一款引人入胜的益智游戏&#xff0c;玩家的任务是合并方块&#xff0c;创造出可爱的动物&#xff0c;这些动物的体型会逐渐变大。游戏玩法包括将方块放到网格上&#xff0c;并战略性地将它们合并以形成更大的动物形状。…
阅读更多...
vscode远程操作虚拟机Ubuntus上的某个目录

vscode远程操作虚拟机Ubuntus上的某个目录

每次打开vscode时候&#xff0c;默认就开始链接最近一次登录的目录&#xff0c;让你输入登录密码&#xff0c;如果此时不想远程登录&#xff0c;那么&#xff0c;可以按esc退出登录连接&#xff0c;这样就会弹出关闭远程登录窗口&#xff0c;点击关闭即可 FR&#xff1a;徐海涛…
阅读更多...
PostgreSQL基础（二）：PostgreSQL的安装与配置

PostgreSQL基础（二）：PostgreSQL的安装与配置

文章目录 PostgreSQL的安装与配置 一、PostgreSQL的安装 二、PostgreSQL的配置 1、远程连接配置
阅读更多...
组网智能是啥？

组网智能是啥？

组网智能是一种基于穿透技术的远程连接解决方案&#xff0c;它为用户提供了操作简单、跨平台应用、无网络要求和独创的安全加速方案等优势。由于这些特点&#xff0c;组网智能已经被几十万用户广泛应用&#xff0c;解决了各行业客户的远程连接需求。 跨平台应用 组网智能具备跨…
阅读更多...
电脑键盘如何练习盲打？

电脑键盘如何练习盲打？

电脑键盘如何练习盲打&#xff1f;盲打很简单&#xff0c;跟着我做&#xff0c;今天教会你。 请看【图1】&#xff1a; 【图1】中&#xff0c;红色方框就是8个基准键位&#xff0c;打字时我们左右手的8个手指就是放在这8个基准键位上&#xff0c;F键和J键上各有一个小突起&…
阅读更多...
02. Flink 快速上手

02. Flink 快速上手

02. Flink 快速上手 1、创建项目导入依赖 pom文件&#xff1a; <properties><flink.version>1.17.0</flink.version> </properties><dependency><groupId>org.apache.flink</groupId><artifactId>flink-streaming-java<…
阅读更多...
最新文章

Copyright @ 2022~2023