vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果,支持鼠标移入停止移出滚动

news2024/11/26 8:54:13

文章目录

  • 前言
  • 一、滚动元素相关属性回顾
  • 一、实现分析
  • 二、代码实现
    • 示例:
    • 2、继续添加功能,增加鼠标移入停止滚动、移出继续滚动效果
    • 2、继续完善


前言

列表自动滚屏效果常见于大屏开发场景中,本文将讲解用vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果,并支持鼠标移入停止滚动、移出自动滚动。


一、滚动元素相关属性回顾

在这里插入图片描述

scrollHeight:滚动元素总高度,包括顶部被隐藏区域高度+页面可视区域高度+底部未显示区域高度
scrollTop:滚动元素顶部超出可视区域的高度,通过改变该值可以控制滚动条位置

一、实现分析

1、如何让滚动条自动滚动?

scrollTop属性表示滚动元素顶部与可视区域顶部距离,也即滚动条向下滚动的距离,只要设置一个定时器(setInterval)相同增量改变scrollTop值就能匀速向下滚动

2、如何做到滚动平滑无缝衔接?

无缝衔接要求滚动到最后一个数据下面又衔接上从头开始的数据造成一种无限滚屏假象,平滑要求从最后一数据衔接上首个数据不能看出滚动条或页面有跳动效果。实现方案可以多复制一份列表数据追加在原数据后面,当滚动到第一份数据的末尾由于后面还有复制的数据,滚动条依然可以向下滚动,直到第一份数据最后一个数据滚出可视区域再把滚动条重置到初始位置(scrollTop=0),此时从第二份数据首个位置变到第一份数据的首个位置由于页面数据一样视觉效果上看将感觉不到页面的滚动和变化,所以就能得到平滑无缝衔接效果。

二、代码实现

示例:

demo.vue

<template>
  <div class="page">
    <div class="warning-view">
      <div class="label">预警信息</div>
      <div
        class="scroll-view"
        ref="scrollViewRef"
      >
        <div ref="listRef" class="list" v-for="(p, n) in 2" :key="n">
          <div class="item" v-for="(item, index) in data" :key="index">
            <div class="content">预警消息 {{ index }}</div>
            <div class="time">2024-11-06</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, nextTick } from "vue";
const data = ref(); //列表数据
const listRef = ref(); //列表dom
const scrollViewRef = ref(); //滚动区域dom

let intervalId = null;

//获取列表数据
const getData = () => {
  //模拟接口请求列表数据
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //生成10条数据
      let list = new Array(10).fill().map((item, index) => index);
      resolve(list);
    }, 1000);
  });
};

onMounted(async () => {
  data.value = await getData();
  nextTick(()=>{
    autoScrolling()
  })
});
//设置自动滚动
const autoScrolling = () => {
  intervalId = setInterval(() => {
    if (scrollViewRef.value.scrollTop < listRef.value[0].clientHeight) {
      scrollViewRef.value.scrollTop += 1;
    } else {
      scrollViewRef.value.scrollTop = 0;
    }
  }, 20);
};

onBeforeUnmount(() => {
  //离开页面清理定时器
  intervalId && clearInterval(intervalId);
});

</script>

<style scoped>
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #010c1e;
  color: #fff;
}
.warning-view {
  width: 400px;
  height: 400px;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
}
.label {
  color: #fff;
  padding: 20px;
  font-size: 22px;
}
.scroll-view {
  flex: 1;
  height: 0;
  width: 100%;
  overflow-y: auto;
}
.list {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #eee;
}
/**
*隐藏滚动条
 */
 ::-webkit-scrollbar{
  display: none;
 }
</style>

说明:布局方面 定义了一个可滚动父元素div(scrollViewRef),子元素 通过v-for="(p, n) in 2“ 循环渲染2份相同的列表数据并挂载在2个div(listRef)上,每隔20ms滚动条scrollTop+1,直到滚完第一个列表最后一个数据出了屏幕,滚动条重新回到初始位置。通过scrollViewRef.value.scrollTop < listRef.value[0].clientHeight判断。

运行效果:
(ps:由于视频转gif帧率变小造成看起来有些卡顿,实际滚动效果非常丝滑)

请添加图片描述

2、继续添加功能,增加鼠标移入停止滚动、移出继续滚动效果

demo.vue

<template>
  <div class="page">
    <div class="warning-view">
      <div class="label">预警信息</div>
      <div
        class="scroll-view"
        ref="scrollViewRef"
        @mouseenter="onMouseenter"
        @mouseleave="onMouseleave"
      >
        <div ref="listRef" class="list" v-for="(p, n) in 2" :key="n">
          <div class="item" v-for="(item, index) in data" :key="index">
            <div class="content">预警消息 {{ index }}</div>
            <div class="time">2024-11-06</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, nextTick } from "vue";
const data = ref(); //列表数据
const listRef = ref(); //列表dom
const scrollViewRef = ref(); //滚动区域dom


let intervalId = null;
let isAutoScrolling = true; //是否自动滚动标识

//获取列表数据
const getData = () => {
  //模拟接口请求列表数据
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //生成10条数据
      let list = new Array(10).fill().map((item, index) => index);
      resolve(list);
    }, 1000);
  });
};

onMounted(async () => {
  data.value = await getData();
  nextTick(() => {
    autoScrolling();
  });
});

//设置自动滚动
const autoScrolling = () => {
  intervalId = setInterval(() => {
    if (scrollViewRef.value.scrollTop < listRef.value[0].clientHeight) {
      scrollViewRef.value.scrollTop += isAutoScrolling ? 1 : 0;
    } else {
      scrollViewRef.value.scrollTop = 0;
    }
  }, 20);
};

onBeforeUnmount(() => {
  //离开页面清理定时器
  intervalId && clearInterval(intervalId);
});

//鼠标进入,停止滚动
const onMouseenter = () => {
  isAutoScrolling = false;
};
//鼠标移出,继续滚动
const onMouseleave = () => {
  isAutoScrolling = true;
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #010c1e;
  color: #fff;
}
.warning-view {
  width: 400px;
  height: 400px;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
}
.label {
  color: #fff;
  padding: 20px;
  font-size: 22px;
}
.scroll-view {
  flex: 1;
  height: 0;
  width: 100%;
  overflow-y: auto;
}
.list {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #eee;
}
/**
*隐藏滚动条
 */
 ::-webkit-scrollbar{
  display: none;
 }
</style>

说明:定义一个全局变量isAutoScrolling标识鼠标是否移入,当鼠标移入isAutoScrolling为false,scrollTop增量为0,当鼠标移出scrollTop增量恢复到1,scrollViewRef.value.scrollTop += isAutoScrolling ? 1 : 0;

运行效果:(ps:由于视频转gif帧率变小造成看起来有些卡顿,实际滚动效果非常丝滑)

请添加图片描述

2、继续完善

上面示例都是默认数据较多会出现滚动条情况下实现的,实际开发过程列表数据是不固定的,可能很多条也可能很少无法超出屏幕出现滚动条,比如列表只有一条数据情况下是不需要自动滚动的,这时候如果强制v-for="(p, n) in 2“ 复制一份数据页面会渲染2条一样数据而且无法出现滚动条,所以正确做法还需要动态判断列数是否会出现滚动条,满足出现的条件才去设置自动滚屏。

是否出现滚动条判断:滚动区域高度>自身可见区域高度(scrollHeight > clientHeight)说明有滚动条

完整代码示例:
demo.vue

<template>
  <div class="page">
    <div class="warning-view">
      <div class="label">预警信息</div>
      <div
        class="scroll-view"
        ref="scrollViewRef"
        @mouseenter="onMouseenter"
        @mouseleave="onMouseleave"
      >
        <div ref="listRef" class="list" v-for="(p, n) in count" :key="n">
          <div class="item" v-for="(item, index) in data" :key="index">
            <div class="content">预警消息 {{ index }}</div>
            <div class="time">2024-11-06</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, nextTick } from "vue";
const data = ref(); //列表数据
const listRef = ref(); //列表dom
const scrollViewRef = ref(); //滚动区域dom
const count = ref(1); //列表个数

let intervalId = null;
let isAutoScrolling = true; //是否自动滚动标识

//获取列表数据
const getData = () => {
  //模拟接口请求列表数据
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //生成10条数据
      let list = new Array(10).fill().map((item, index) => index);
      resolve(list);
    }, 1000);
  });
};

onMounted(async () => {
  data.value = await getData();
  nextTick(() => {
    //判断列表是否生成滚动条
    count.value = hasScrollBar() ? 2 : 1;
    //有滚动条开始自动滚动
    if (count.value == 2) {
      autoScrolling();
    }
  });
});
//判断列表是否有滚动条
const hasScrollBar = () => {
  return scrollViewRef.value.scrollHeight > scrollViewRef.value.clientHeight;
};
//设置自动滚动
const autoScrolling = () => {
  intervalId = setInterval(() => {
    if (scrollViewRef.value.scrollTop < listRef.value[0].clientHeight) {
      scrollViewRef.value.scrollTop += isAutoScrolling ? 1 : 0;
    } else {
      scrollViewRef.value.scrollTop = 0;
    }
  }, 20);
};

onBeforeUnmount(() => {
  //离开页面清理定时器
  intervalId && clearInterval(intervalId);
});

//鼠标进入,停止滚动
const onMouseenter = () => {
  isAutoScrolling = false;
};
//鼠标移出,继续滚动
const onMouseleave = () => {
  isAutoScrolling = true;
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #010c1e;
  color: #fff;
}
.warning-view {
  width: 400px;
  height: 400px;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
}
.label {
  color: #fff;
  padding: 20px;
  font-size: 22px;
}
.scroll-view {
  flex: 1;
  height: 0;
  width: 100%;
  overflow-y: auto;
}
.list {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 50px;
  min-height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #eee;
}
/*隐藏滚动条
 */
 ::-webkit-scrollbar{
  display: none;
 }
</style>

运行效果:
在这里插入图片描述
把数据改成只有一条

//获取列表数据
const getData = () => {
  //模拟接口请求列表数据
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //生成1条数据
      let list = new Array(1).fill().map((item, index) => index);
      resolve(list);
    }, 1000);
  });
};

运行效果:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

腾讯云nginx SSL证书配置

本章教程,记录在使用腾讯云域名nginx证书配置SSL配置过程。 一、nginx配置 域名和证书,替换成自己的即可。证书文件可以自定义路径位置。服务器安全组或者防火墙需要开放80和443端口。 server {#SSL 默认访问端口号为 443listen 443 ssl; #请填写绑定证书的域名server_name c…

RabbitMQ的DLX(Dead-Letter-Exchange 死信交换机,死信交换器,死信邮箱)(重要)

RabbitMQ的DLX 1、RabbitMQ死信队列2、代码示例2.1、队列过期2.1.1、配置类RabbitConfig&#xff08;关键代码&#xff09;2.1.2、业务类MessageService2.1.3、配置文件application.yml2.1.4、启动类2.1.5、配置文件2.1.6、测试 2.2、消息过期2.2.1、配置类RabbitConfig2.2.2、…

陪诊问诊APP开发实战:基于互联网医院系统源码的搭建详解

时下&#xff0c;开发一款功能全面、用户体验良好的陪诊问诊APP成为了医疗行业的一大热点。本文将结合互联网医院系统源码&#xff0c;详细解析陪诊问诊APP的开发过程&#xff0c;为开发者提供实用的开发方案与技术指导。 一、陪诊问诊APP的背景与功能需求 陪诊问诊APP核心目…

FreeRTOS 21:递归互斥信号量

递归信号量&#xff0c;见文知义&#xff0c;递归嘛&#xff0c;就是可以重复获取调用的&#xff0c;本来按照信号量的特性&#xff0c;每获取一次可用信号量个数就会减少一个&#xff0c;但是递归则然&#xff0c; 对于已经获取递归互斥量的 任务可以重复获取该递归互斥量&…

算法|牛客网华为机试41-52C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试21-30C 文章目录 HJ41 称砝码HJ42 学英语HJ43 迷宫问题HJ44 SudokuHJ45 名字的漂亮度HJ46 截取字符串HJ48 从单向链表中删除指定值的节点HJ50 四则运算HJ51 输出单向链表中倒数第k个结点HJ52 计算字符串的编辑距离 HJ41 称砝…

mysql5安全审计

安装插件 插件需要严格与数据库版本适配&#xff0c;不然安装过程中会出现问题 解压插件 cd 插件所在路径unzip audit-plugin-mysql-5.7-1.1.7-921-linux-x86_64.zip#查看mysql默认插件目录 mysql> SHOW GLOBAL VARIABLES LIKE plugin_dir;# 将插件移动到mysql默认插件目…

MySQL 安装与配置

MySQL 安装与配置 MySQL 安装 MySQL 一般分为社区版和商业版&#xff0c;我们使用的是社区版&#xff08;因为免费&#xff09;。MySQL 安装的教程在网上有很多&#xff0c;此处就不再进行进行赘述&#xff0c;这里推荐两篇文章&#xff1a;如何在 Windows11 中安装 MySQL 8.…

Flink安装和Flink CDC实现数据同步

一&#xff0c;Flink 和Flink CDC 1&#xff0c; Flink Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。 中文文档 Apache Flink Documentation | Apache Flink 官方文档 &#xff1a;https://flink.apache.org Flink 中文社区…

车机版 Android Audio 框架笔记

车机版Android Audio 框架涉及的知识点很多&#xff0c;在工作中涉及的功能板块也及其繁杂&#xff0c;后面我会根据工作中的一些实际遇到的实例&#xff0c;逐步拆解 Android Audio的知识点&#xff0c;这里从网上整理了一些思维导图&#xff0c;可以做为未来的一个研究方向&a…

ubuntu 22.04 镜像源更换

双11抢了个云服务器&#xff0c;想要整点东西玩玩&#xff0c;没想到刚上来就不太顺利 使用sudo apt update更新软件&#xff0c;然后发生了如下报错 W: Failed to fetch http://mirrors.jdcloudcs.com/ubuntu/dists/jammy/InRelease 理所当然想到可能是镜像源连接不是很好&…

浅谈Agent

目录 什么是大模型 Agent &#xff1f; 大模型Agent 有哪些部分组成? 规划&#xff08;Planning&#xff09; Planning类型 不依赖反馈的计划 基于反馈的计划 拆解子目标和任务分解方法 COT TOT GOT LLMP 反思和完善 ReAct(融合推理与执行的能力) Reflexion(动态…

NAT网络工作原理和NAT类型

NAT基本工作流程 通常情况下&#xff0c;某个局域网中&#xff0c;只有路由器的ip是公网的&#xff0c;局域网中的设备都是内网ip&#xff0c;内网ip不具备直接与外部应用通信的能力。 处于内网的设备如何借助NAT来实现访问外网的应用&#xff1f; 对于开启了NAT功能的局域网…

Jenkins插件使用问题总结

Git Push插件 插件介绍 主要是用于git推送代码到远程仓库中使用&#xff0c;插件地址 pipeline中使用 官方说明中只有一句代码gitPush(gitScm: scm, targetBranch: env.BRANCH_NAME, targetRepo: origin) 流水线语法中也做的不齐全所以一开始我老是设置错&#xff0c;导致代…

GPT-5 终于来了 —— 人们的预期与现实

高智慧人工智能的两面性&#xff0c;利用AI和被AI利用 前言&#xff1a;人工智能的热度持续升温&#xff0c;似乎已无处不在&#xff0c;但大家对它的感知却并不显著。这种状况有点像美国 2024 年的总统大选&#xff0c;投票前人们彼此不清楚支持谁&#xff0c;直到最终计票才发…

微服务透传日志traceId

问题 在微服务架构中&#xff0c;一次业务执行完可能需要跨多个服务&#xff0c;这个时候&#xff0c;我们想看到业务完整的日志信息&#xff0c;就要从各个服务中获取&#xff0c;即便是使用了ELK把日志收集到一起&#xff0c;但如果不做处理&#xff0c;也是无法完整把一次业…

Matlab实现鲸鱼优化算法优化随机森林算法模型 (WOA-RF)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 鲸鱼优化算法&#xff08;Whale Optimization Algorithm, WOA&#xff09;是受座头鲸捕食行为启发而提出的一种新型元启发式优化算法。该算法通过模拟座头鲸围绕猎物的螺旋游动和缩小包围圈的方式&#xff0c;在…

【学习笔记】网络设备(华为交换机)基础知识 10 —— 信息中心 ① 简介

提示&#xff1a;学习华为交换机信息中心的概述&#xff08; 包括信息中心的概念、功能、以及信息的分类、分级、和输出 &#xff09; &#xff1b;还包括信息中心常用的命令 &#xff08; 使能信息中心、命名信息通道、配置信息过滤、清除统计信息、查看信息中心相关信息的命令…

【unity】unity2021 URP管线下 SceneView没有MipMaps选项了怎么办?扩展Rendering Debugger工具

一、前言 之前项目 Unity打开后 Scene窗口 有一个MipMaps选项模式&#xff0c; 可以查看哪些贴图正常距离下发红 &#xff0c;说明用不到那么大&#xff0c;可以缩一下尺寸。 但 新的项目在Unity2021上&#xff0c;用了URP&#xff0c; 就没见过这个选项。 查了一篇介绍详细的…

前端代码分析题(选择题、分析题)——JS事件循环分析、await和作用域分析

Promise其实也不难-CSDN博客 Promise 的执行顺序分析 Promise 对象的执行是异步的&#xff0c;但其执行器函数内部的代码是立即执行的&#xff0c;而 then方法注册的回调函数则是在 Promise 状态改变后执行的。 const myPromise new Promise((resolve, reject) > {conso…

DAY24|回溯算法Part03|LeetCode:93.复原IP地址、78.子集、90.子集II

目录 LeetCode:93.复原IP地址 基本思路 C代码 LeetCode:78.子集 基本思路 C代码 LeetCode:90.子集II 基本思路 C代码 通过used实现去重 通过set实现去重 不使用used和set版本 LeetCode:93.复原IP地址 力扣代码链接 文字讲解&#xff1a;LeetCode:93.复原IP地…