vue实现聊天栏定位到最底部(超简单、可直接复制使用)

原理

通过watch监听聊天内容的加载,一旦加载完成或者数据更新触发vue的数据监听时,就重新修改【滚动滑钮到滚动条顶部的距离=滚动条的高度】,从而实现定位到底部的效果。

实现

1、布局

新建一个div(聊天框,如下),给他一个id,一会要用到

 然后记得给这个div的y轴一个滚动条,如下:

.dlog_content{
  overflow-y: auto;
  overflow-x: hidden;
}

 2、JavaScript代码(核心)

这里的messnowList是我的消息储存集合,用于判断数据变化,这个可以根据你实际情况修改,通过id绑定刚才的聊天框div,然后修改实现定位底部

<script>

export default {
  data () {
   
  },
  watch: {
    // 监听当前消息列表,更新时,保持滚动条位于底部
    messnowList: function scrollToBottom () {
      this.$nextTick(() => {
        var message = document.getElementById('content_overflow')
        // 滚动滑钮到滚动条顶部的距离=滚动条的高度
        message.scrollTop = message.scrollHeight
      })
    }
  }
}

</script>

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

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

相关文章

【数据结构算法(二)】链表总结

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 普通单向链表 双向链表 带哨兵的链表 环形链表 ⭐双向带头带环链表的实现⭐ ⭐链表基础OJ⭐ 普通单向链表 结点结构&#xff1a;只有val 和 next指针 初始时&#xff1a;head null; 双向链表 指针&…

dedecms标签

【Arclist 标记】这个标记是DedeCms最常用的一个标记&#xff0c;也叫自由列表标记&#xff0c;其中 hotart、coolart、likeart、artlist、imglist、imginfolist、specart、autolist 这些标记都是由这个标记所定义的不同属性延伸出来的别名标记。功能说明&#xff1a;获取指定的…

suricata识别菜刀流量

一、捕获菜刀流量 payload特征&#xff1a; PHP: <?php eval($_POST[caidao]);?> ​ ASP: <%eval request(“caidao”)%> ​ ASP.NET: <% Page Language“Jscript”%><%eval(Request.Item[“caidao”],“unsafe”);%>数据包流量特征&#xff1a; …

【C++上层应用】3. 动态内存

文章目录 【 1. new和delete运算符 】1.1 new 分配内存1.2 delete 释放内存1.3 实例 【 2. 数组的动态内存分配 】2.1 一维数组2.2 二维数组2.3 三维数组 【 3. 对象的动态内存分配 】 C 程序中的内存分为两个部分&#xff1a; 栈&#xff1a;在 函数内部 声明的所有变量都将占…

LeetCode算法心得——使用最小花费爬楼梯(记忆化搜索+dp)

大家好&#xff0c;我是晴天学长&#xff0c;很重要的思想动规思想&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1&#xff09;使用最小花费爬楼梯 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从…

WinApp自动化测试之工具的选择

WinApp&#xff08;Windows APP&#xff09;是运行在Windows操作系统上的应用程序&#xff0c;通常会提供一个可视的界面&#xff0c;用于和用户交互。 例如运行在Windows系统上的Microsoft Office、PyCharm、Visual Studio Code、Chrome&#xff0c;都属于WinApp。常见的WinA…

【Linux】xfs文件系统的xfs_info命令

xfs_info命令 ① 查看命令工具自身的版本号 xfs_info -V ② 查看指定XFS设备的详细信息 xfs_info <device_name> 其他的一些命令可以使用man xfs_info去查阅man手册&#xff1a;

vue3中v-for报错 ‘item‘ is of type ‘unknown‘

报错 在写vue3ts的项目&#xff0c;得到一个数组&#xff0c;需要循环展示&#xff0c;使用v-for循环&#xff0c;写完之后发现有个报错&#xff0c;如下&#xff1a; 解决 props的时候使用PropType将数据类型完整标注即可 以为没有显示的表示出list中item的类型&#xff…

面对网络渠道低价 品牌如何应对

品牌在发展过程中&#xff0c;会不断拓展自己的销售渠道&#xff0c;网站渠道是顺应消费者习惯的一种销售战场&#xff0c;没有品牌会轻易丢弃这个渠道&#xff0c;但是网络渠道的低价又是很常见的&#xff0c;所以只有及时的治理渠道低价&#xff0c;对应的渠道才会发展越来越…

python数据结构与算法-10_递归

递归 Recursion is a process for solving problems by subdividing a larger problem into smaller cases of the problem itself and then solving the smaller, more trivial parts. 递归是计算机科学里出现非常多的一个概念&#xff0c;有时候用递归解决问题看起来非常简单…

呼叫中心自建好还是云外呼好用?

传统的呼叫中心在科技的发展下已经被不适用了&#xff0c;都开始使用起智能化的呼叫中心&#xff0c;一个是自建式呼叫中心&#xff0c;一个是云外呼系统。那自建式呼叫中心与云外呼系统的区别有哪些呢&#xff1f; 1、企业自建呼叫中心 劣势 系统维护更新难&#xff1a;自建…

Proxifier联动BurpSuite抓取小程序

直接上软件包 Proxifier安装包https://pan.quark.cn/s/7fb9ad6deb7cProxifier配置文件https://pan.quark.cn/s/049c5f21c97e 无话可说直接操作 1、安装Proxifier步骤可以省略..... 2、将下面文件导入到Proxifier中 3、左上角文件-导入配置文件&#xff08;因为我已经导入过…

快来瞧瞧这样制作出来的电子画册,还便于分享宣传呢!

说起电子画册制作&#xff0c;很多人都不知道从何入手。与传统纸质画册相比&#xff0c;电子画册最大的优点是便于传阅&#xff0c;通过微信、QQ等社交平台都能进行转发和分享。而且内容的排版基本上和纸质画册一致&#xff0c;不同的是&#xff0c;无论图片还是文字都可以赋予…

网络渗透测试(wireshark 抓取QQ图片)

1.打开wireshark 这里我用的wifi连接 所以点开wifi就好 打开wifi之后就开始在本机上进行抓包了 我们先给我们的QQ发送一张图片&#xff0c;用自己的手机发送给电脑 然后点击左上角的正方形&#xff0c;停止捕获抓包 QQ的关键词是oicq&#xff0c;所以我们直接找 打开oicq …

2023年国自然植物科学相关面上项目信息公布(小麦、大麦、棉花、大豆、玉米)

2024年申报国自然项目基金撰写及技巧http://mp.weixin.qq.com/s?__bizMzA4NTAwMTY1NA&mid2247575761&idx1&sn32dbacd3393f3b76a1e0668e4b8b3c89&chksm9fdd7c08a8aaf51ec31d4790067bb57751a09947eeb7e728b8c008d26b89adba37e0cab32a62&scene21#wechat_redi…

【23真题】难!下沙“小清华”难度爆增!

今天分享的是23年“下沙小清华”杭州电子科技大学843的信号与系统试题及解析。 本套试卷难度分析&#xff1a;22年杭电843考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取&#xff01;平均分为112分&#xff0c;最高分为145分&#xff01;该院校23…

requests 库中响应最大文件大小和最大连接超时时间的设定

最近&#xff0c;requests-toolbelt库的开发者jvanasco提出了一项特性请求&#xff0c;即在发送请求时设置响应的最大文件大小和最大连接超时时间。 对于最大连接超时时间的问题&#xff0c;我们可以借鉴requests-toolbelt库的开发者kevinburke的建议&#xff0c;将请求放入线程…

基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码

基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于变色龙优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…

我的创作纪念日2048天

机缘 在这特殊的日子里&#xff0c;我要庆祝我的 CSDN 创作纪念日——已经坚持了整整2048天&#xff01; 在这2048天里&#xff0c;我经历了很多成长和收获。作为一名技术写手&#xff0c;我投入了大量的时间和精力来分享我的知识和经验。我曾经写过关于数据库、数据同步、数…

系列四、ThreadLocal的工作原理

一、内存结构图 二、工作原理 &#xff08;1&#xff09;Thread有一个类型为ThreadLocal.ThreadLocalMap threadLocals 的实例变量&#xff0c;即每个线程都有一个属于自己的ThreadLocalMap&#xff1b; &#xff08;2&#xff09;ThreadLocalMap内部维护着Entry数组&#xff0…