当前位置: 首页 > 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 "…...

零下20度实测:国产SysMax PCAN FD在寒区标定中的稳定性与兼容性全记录

零下20度极限挑战&#xff1a;SysMax PCAN FD在寒区汽车电子标定中的实战全解析 当清晨的内蒙古满洲里气温骤降至-20℃&#xff0c;大多数电子设备早已进入"冬眠"状态&#xff0c;而我们的汽车电子标定工作却必须继续。在这个被称为"中国冷极"的地区&#…...

别再到处找接口了!手把手教你用阿里云盘+Alist搭建自己的TVBox影视仓(附JSON配置模板)

私有影视仓搭建实战&#xff1a;用阿里云盘Alist打造专属TVBox资源库 每次打开TVBox却发现公共接口失效&#xff1f;第三方资源突然无法访问&#xff1f;与其在各大论坛反复搜索不稳定接口&#xff0c;不如用两小时搭建一个完全私有的影视管理系统。本文将彻底改变你获取影音资…...

阅读APP书源完全指南:3种快速导入方法与问题解决方案

阅读APP书源完全指南&#xff1a;3种快速导入方法与问题解决方案 【免费下载链接】Yuedu &#x1f4da;「阅读」自用书源分享 项目地址: https://gitcode.com/gh_mirrors/yu/Yuedu 「阅读」APP书源开源项目为小说爱好者提供了一个强大的解决方案&#xff0c;让您能够在一…...

tao-8k嵌入模型实测:Xinference免配置部署,长文本处理效率翻倍

tao-8k嵌入模型实测&#xff1a;Xinference免配置部署&#xff0c;长文本处理效率翻倍 1. 引言&#xff1a;长文本嵌入的工程挑战 在自然语言处理领域&#xff0c;文本嵌入模型扮演着至关重要的角色。它们将文本转换为高维向量表示&#xff0c;为语义搜索、文档聚类、问答系统…...

QMCFLAC2MP3终极指南:一键解锁QQ音乐格式限制的完整解决方案

QMCFLAC2MP3终极指南&#xff1a;一键解锁QQ音乐格式限制的完整解决方案 【免费下载链接】qmcflac2mp3 直接将qmcflac文件转换成mp3文件&#xff0c;突破QQ音乐的格式限制 项目地址: https://gitcode.com/gh_mirrors/qm/qmcflac2mp3 你是否曾经从QQ音乐下载了心爱的歌曲…...

AI 创作者指南:附录工具包

📦 附录工具包 “工具不是答案,但能让你更快找到答案。” 第五部分压轴刚聊完“人类永远有护城河”,你现在从灵感到商业化、从伦理到未来,全链路都打通了,是不是心里满满的成就感?😊 来,重头戏到了——📦 附录工具包! 这可是我给你准备的“创作百宝箱”,全都是现…...

C/C++调试神器:5分钟搞定backtrace打印调用栈(附完整代码)

C/C调试实战&#xff1a;5分钟集成智能调用栈追踪工具 当你的C/C程序在深夜突然崩溃&#xff0c;控制台只留下一行"Segmentation fault"时&#xff0c;那种绝望感每个开发者都体会过。传统的调试方式往往需要反复加日志、断点跟踪&#xff0c;效率低下。本文将带你用…...

Realistic Vision V5.1虚拟摄影棚快速上手:新手3步生成比肩单反的人像

Realistic Vision V5.1虚拟摄影棚快速上手&#xff1a;新手3步生成比肩单反的人像 1. 为什么选择Realistic Vision V5.1虚拟摄影棚 如果你一直想尝试专业级人像摄影&#xff0c;但又苦于没有昂贵的单反设备和摄影棚&#xff0c;Realistic Vision V5.1虚拟摄影棚就是为你量身定…...

安全测试入门:开发与测试都需要知道的OWASP TOP 10

为何OWASP TOP 10是测试人员的必修课&#xff1f;在数字化浪潮席卷全球的今天&#xff0c;软件已深度融入商业运营与社会生活。每一次点击、每一次数据交换的背后&#xff0c;都潜藏着安全风险。对于软件测试从业者而言&#xff0c;功能与性能测试仅是基础&#xff0c;安全测试…...

Wan2.2-I2V-A14B持续集成/持续部署(CI/CD)流水线搭建

Wan2.2-I2V-A14B持续集成/持续部署&#xff08;CI/CD&#xff09;流水线搭建 1. 引言 在AI模型服务开发中&#xff0c;频繁的迭代更新是常态。每次代码修改后手动执行测试、构建和部署不仅效率低下&#xff0c;还容易出错。本文将带你从零开始&#xff0c;为Wan2.2-I2V-A14B模…...