当前位置: 首页 > news >正文

Vue设置滚动条自动保持到最底端

需求描述:在开发中我们常常会遇到需要让滚动条保持到最底端的需求,比如在开发一个聊天框时,请求接口拿到消息列表数据,展示到前端页面时,需要让滚动条自动滚到最底端,以此来展示最后的聊天记录。同时,当发送一条新的消息时,也需要滚动条自动滚动到最底端,默认显示到最后一条数据,而不是在发送完一条新消息之后还需要手动滑动滚动条到最底端。

主要实现原理:

其实这个需求就是需要设置该元素(产生滚动条的元素)的scrollTop 等于scrollHeight

主要代码:

<template><div ref="box" class="box"></div>
</template>
<script>// 滚动到底部scrollToBottom() {// 这里是Vue2的写法const box = this.$refs.box as HTMLElementthis.$nextTick(() => {box.scrollTop = box.scrollHeight})}
</script>
<style>
.box {overflow: auto;height: 446px;  /*重要!一定要有高度才会生成滚动条*/}</style>

注意事项:

box容器必须设置具体的高度height,否则不会产生滚动条,(如果页面上看有滚动条,那可能是父元素产生的滚动条),如果没有给box容器设置高度的话,这个scrollToBottom方法就不会生效!

如果本篇博客对你有帮助,请点个赞吧o( ̄▽ ̄)d

相关文章:

Vue设置滚动条自动保持到最底端

需求描述&#xff1a;在开发中我们常常会遇到需要让滚动条保持到最底端的需求&#xff0c;比如在开发一个聊天框时&#xff0c;请求接口拿到消息列表数据&#xff0c;展示到前端页面时&#xff0c;需要让滚动条自动滚到最底端&#xff0c;以此来展示最后的聊天记录。同时&#…...

uniapp创建一个新项目并导入uview-plus框架

近年来&#xff0c;随着技术的发展&#xff0c;人们越来越意识到跨平台和统一的重要性。对于同一款应用来说&#xff0c;一般都会有移动端、PC端、甚至小程序端。这是由于设备的不同&#xff0c;我们必须要做很多的客户端来满足不同的用户需求。但是由于硬件设施的不同&#xf…...

LabVIEW光电在线测振系统

开发了一种基于LabVIEW软件和光电技术的在线测振系统。该系统利用激光作为调制光源&#xff0c;并通过位置敏感型光电传感器&#xff08;PSD&#xff09;进行轴振动的实时检测。其主要特点包括非接触式测量、广泛的测量范围、高灵敏度和快速响应时间&#xff0c;且具备优良的抗…...

分布式光伏电站 转化能源 丰富用电结构

分布式光伏系统是一种利用分散式的可再生能源&#xff0c;在靠近用户端的地方安装光伏发电设施&#xff0c;通过光伏效应将太阳能转化为直流电能&#xff0c;并通过逆变器将其转换为交流电&#xff0c;以供用户使用的系统。以下是对分布式光伏系统的详细阐述&#xff1a; 一、…...

环境配置:如何在IntelliJ IDEA中安装和修改JDK版本配置(以Windows为例)

环境配置&#xff1a;如何在IntelliJ IDEA中安装和修改JDK版本配置&#xff08;以Windows为例&#xff09; 为了在Java开发中使用最新的功能和优化&#xff0c;升级和配置JDK版本是必不可少的。本文将详细介绍如何下载、安装、配置最新的JDK版本&#xff0c;并在IntelliJ IDEA…...

Spring AOP 原理——代理模式

目录 一、代理模式 1.1 静态代理 1.2 动态代理 1.2.1 JDK动态代理 1.2.2 CGLIB动态代理 Spring AOP 是基于动态代理来实现AOP的。 一、代理模式 代理模式, 也叫委托模式。该模式是为其他对象提供⼀种代理以控制对这个对象的访问。它的作用就是通过提供一个代理类&#…...

leetcode 234.回文链表

思路&#xff1a;其实就是判断反转链表是不是和原链表一样的问题。 我们可以借助反转链表的思路&#xff0c;首先我们先把链表的全部元素正向存储&#xff0c;然后再把链表进行反转。 之后我们再遍历反转之后的链表结点元素是不是和刚刚存储数组里面的元素一致就可以了。一旦…...

AD中Split Planes 的作用和功能

在 Altium Designer (AD) 中&#xff0c;Split Planes 功能允许你在一个平面层&#xff08;例如电源层或地层&#xff09;上分割出多个不同的区域&#xff0c;每个区域可以分配给不同的网络&#xff08;net&#xff09;。这对于设计中需要管理多种电源或接地类型的情况下非常有…...

[linux][命令]linux文件操作命令大全

Linux操作系统提供了丰富的文件操作命令&#xff0c;以下是一些常用的文件操作命令列表&#xff1a; 查看文件内容 cat&#xff1a;查看文件内容。less&#xff1a;分页显示文件内容。more&#xff1a;分页显示文件内容&#xff0c;一次显示一屏。head&#xff1a;查看文件的前…...

大语言模型 (LLM) 窥探未来

初始的探索 在NLP领域&#xff0c;早期的模型如 LSTM 和 GRU 在处理序列数据时取得了一定的成功。但随着数据量和复杂性的增加&#xff0c;这些模型开始显得力不从心。 Transformer的诞生 Transformer 模型的提出&#xff0c;它通过自注意力&#xff08;Self-Attention&…...

WPF DataGrid调试错误总结

最近WPF中使用了DataGrid做了表格&#xff0c;框架版本为472&#xff0c;遇到了不少的问题&#xff0c;因为软件添加了一个退出进程的全局错误捕获&#xff0c;因此不得不解决所有问题&#xff0c;这边总结一下DataGrid的问题 EditItem is not allowed for this view 按字面意…...

【GCC】结合GPT4 延迟梯度学习1:公式推导及理论分析

大神的分析 本文主要借鉴。【TWCC 】基于gpt和python简化分析webrtc拥塞控制论文: Analysis and Design of the Google Congestion Contro for Web Real-time Communication (WebRTC)感觉应该学习好理论后再进行python 分析:【gcc】基于gpt和python的流程和延迟梯度分析另外:…...

【Linux】【网络】进程间关系与守护进程

进程间关系与守护进程 文章目录 1.进程组1.1什么是进程组1.2组长进程 2.会话2.1什么是会话2.2如何创建会话 3.作业3.1什么是作业、作业控制&#xff1f;3.2作业号3.3常见作业状态3.4作业的切换 4.守护进程4.1什么是守护进程&#xff1f;4.2如何创建守护进程4.3模拟实现daemon …...

红黑树的插入与删除

文章目录 红黑树概念红黑树的性质&#xff1a; 红黑树的插入操作情况一情况二情况三 小总结红黑树的验证红黑树的删除一.删除单孩子节点1. 删除节点颜色为黑色2. 删除颜色为红色 二. 删除叶子节点1. 删除节点为红色2.删除节点为黑色2.1兄弟节点为黑色&#xff0c;有孩子节点&am…...

联通数科如何基于Apache DolphinScheduler构建DataOps一体化能力平台

各位小伙伴晚上好&#xff0c;我是联通数字科技有限公司数据智能事业部的王兴杰。 今天&#xff0c;我将和大家聊一聊联通数字科技有限公司是如何基于Apache DolphinScheduler构建DataOps一体化能力平台的。 今天的分享主要分为三个部分&#xff1a; 关于DataOps的一些思考&a…...

Python知识点:如何使用Mitmproxy进行HTTP/HTTPS流量分析

Mitmproxy 是一个强大的中间人代理工具&#xff0c;可以用来分析和修改 HTTP 和 HTTPS 流量。以下是如何使用 Mitmproxy 进行 HTTP/HTTPS 流量分析的步骤&#xff1a; 安装 Mitmproxy 首先&#xff0c;你需要在系统上安装 Mitmproxy。可以通过以下方式安装&#xff1a; 使用 …...

06:【stm32】OLED模块的简单使用

OLED模块的简单使用 OLED简单的使用 OLED简单的使用 OLED驱动函数是使用B站UP江科大的。我们直接调用即可&#xff0c;是使用软件模拟I2C协议进行通信的。具体的I2C协议可查看上官嵌入式开发中的C51单片机开发。 驱动函数文件&#xff1a;通过百度网盘分享的文件&#xff1a;…...

HIVE4.0.0的10000端口启动不起来的一种情况

问题 原生态部署HIVE4.0.0启动不起来10000端口&#xff0c;也没找到日志文件的位置&#xff0c;后来才知道日志文件默认在/tmp/<hostname>/路径下面&#xff0c;查看日志以为是Tez没安装的问题&#xff0c;我这儿要实现hive on spark&#xff0c;是不是该安装spark然后启…...

[极客大挑战 2019]FinalSQL1

打开题目 sql注入&#xff0c;点击1试一下 点击2试一下 点击3试一下 点击4 点击5 id6试一下 感觉是sql盲注了 编写脚本 import requests import string from time import sleep url "http://9da9cb18-3096-413a-9476-8a177ffec31a.node4.buuoj.cn:81/search.php?id0^(…...

Go语言 标签Label

Go语言 label标签和枚举介绍及使用示例 目录 标签label 标签和goto continue break 枚举 代码示例 说明 总结 标签label 标签和goto 设置标签&#xff0c;并在标签中判断符合条件后&#xff0c;跳到指定标签位置。 示例如下&#xff1a; package mainimport "…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

C++11 constexpr和字面类型:从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要 神经影像技术对医学科学产生了深远的影响&#xff0c;推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下&#xff0c;基于神经血管耦合现象的多模态神经影像方法&#xff0c;通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里&#xff0c;本研…...

MySQL基本操作(续)

第3章&#xff1a;MySQL基本操作&#xff08;续&#xff09; 3.3 表操作 表是关系型数据库中存储数据的基本结构&#xff0c;由行和列组成。在MySQL中&#xff0c;表操作包括创建表、查看表结构、修改表和删除表等。本节将详细介绍这些操作。 3.3.1 创建表 在MySQL中&#…...