聊天记录点击加载更多 滚动条位置不变

最新推荐文章于 2024-08-29 10:53:39 发布
最新推荐文章于 2024-08-29 10:53:39 发布
阅读量1.9k 收藏 3
点赞数 4
分类专栏： 开发 文章标签： elementui javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56325569/article/details/122039139
版权 
 // 滚动条到指定位置
    scroll () {
      this.$nextTick(() => {
        let msg = document.getElementsByClassName('div')[0] // 获取对象
        let distanceFromBottom = msg.scrollHeight - msg.scrollTop - msg.clientHeight
        msg.scrollTop = distanceFromBottom // 滚动高度
      })
    },

前端小小菜鸡
关注
专栏目录
uni-app模仿微信聊天功能,上拉加载历史消息位置保持不变
web__bug的博客
08-01 2477
uni-app模仿微信聊天上拉加载更多消息
加载历史消息时，滚动条位置不变
m0_63393739的博客
11-10 1044
转载于： https://m.html.cn/qa/jquery/1111036550025.html
scroll-view 聊天记录 顶部下拉加载并停留在原先位置
weixin_56372270的博客
07-08 375
scroll-view 聊天记录 顶部下拉加载并停留在原先位置，但是会闪动一下，目前还没有解决。
聊天——拉去历史记录，保持聊天页面静止
m0_49494051的博客
04-06 635
聊天——拉去历史记录，保持聊天页面静止。
vue实现：查找历史聊天记录，并让页面停留在原位置
weixin_58412143的博客
10-28 2170
【代码】vue实现：聊天记录，下拉加载下一页数据，并让页面停留在原位置。
vue上滑加载更多，让滚轮在原来的位置
devil的博客
08-26 917
vue上滑加载更多，让滚轮在原来的位置 <div class="sessionArea" @scroll="onScroll" ref="loadMoreMsg" ></div> //moreHistoryUrl是表示加载更多历史的url，showMore表示是展示加载中（true） onScroll() { var contentHeight = this.$refs.loadMoreMsg.scrollTop; //容器高度 if (c
解决拉取历史消息并添加在聊天记录前面，页面滚动位置保持不变
qq_38337245的博客
10-19 1638
微信小程序参考demo： https://developers.weixin.qq.com/s/qoE6INms7Pcj 规则：for循环设置有效的 key 值，key值最好是唯一的
vue实现：聊天记录，下拉加载下一页数据，并让页面停留在原位置
liucai1018的博客
05-14 7629
需要实现一个类似微信聊天记录的功能，其中碰到一个问题：下拉加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果。 实现思路： 1、首先，要实现让页面到某个位置，需要用到scrollTop属性； 2、然后就需要计算scrollTop的值为多少，则滑动多少距离； 3、计算滑动距离的思路：既然需要停留在当前位置的话，那么正常思考的话就是需要知道加载的这一页数据所占的高度，然后将scrollTop值设置为这个高度即可，但这里有个问题，即便每次加载
js，web端加载新消息，滚动条位置不变，最新消息渲染至视口
最新发布
阿牛哥的博客
08-29 961
保持滚动条位置不变的关键是记录和恢复滚动条的高度差异。通过计算加载新消息前后的高度差，并调整滚动位置，可以有效地防止用户视角的跳动。
下拉滚动 定位不变
weixin_43947692的博客
10-13 336
聊天下拉加载历史记录时候，希望不闪屏，位置不变。结合重排的原理，思考出了下列的解决方案
react实现聊天室历史消息及滚动条随着消息滑动功能
编译的阿喵
01-25 2184
MessageBox.js import React, { useRef, useEffect, memo } from 'react' import PropTypes from 'prop-types' import { Spin } from 'antd' import { isEmpty } from 'lodash' import * as api from '../../api' import MessageItemBox from './MessageItemBox' import '../
iOS聊天下拉刷新聊天记录的实现
学习程序好榜样的博客
03-15 2416
1. 想法 最近在开发一个社交类app，要实现类似微信那种下拉刷新聊天记录的功能。 一般有两种实现方式： 1. 直接fetch一个entity的所有数据然后在内存中做filter，就是把所有聊天记录先读出来然后每次加载10条。     缺点：浪费内存   优点：速度快 2. 使用predicate，每次访问数据库读取10条数据显示。    缺点：速度比较慢，会有
聊天室页面问题和解决方案
qq_18594435的博客
07-28 585
uniapp 聊天页面的一些问题和解决方法
实现消息存档—微信聊天记录组件
Maserati_8000的博客
01-15 1265
前言 近期在处理业务时，涉及到了微信聊天记录消息存档的场景；接下来分析分析，实现微信聊天记录组件时，所需要注意的几点地方； 1. 分析原生微信聊天窗口 聊天窗口可分为PC端跟移动端，先看看PC端： 实现此聊天窗口，需要注意两点就是： 每次进入新的聊天窗口时，页面都是至于最底部，以保证查看到最新消息； 加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果；我们想要的是，查看更多时，此时历史的消息会添加到顶部去，此时滚动条还是在原来位置，以保证当
uniapp(全端兼容) - 实现类似微信聊天、淘宝买卖双方交流的简易聊天功能示例（开箱即用，完整源码与注释）全端兼容 H5 App 小程序，稳定无 BUG！
高级前端工程师
03-01 1万+
uni-app开发聊天页面，想在uniapp做一个IM即时聊天，uniapp模仿微信实现聊天界面的示例代码，uniapp中使用Socket.IO/websocket实现即时通讯聊天，关于uniapp:uniapp实现IM即时通讯仿微信聊天功能，uniapp中使用websocket实现实时聊天功能，uniapp实现聊天功能，uniapp 聊天界面，uni-app+vue仿微信聊天APP界面，uniapp实现聊天|uniapp聊天源码，uniapp实现聊天室发送信息，前端uniapp+webSocket 聊天室
vue 数据加载完怎么保持滚动条在底部 笔记
weixin_51140667的博客
05-21 250
)
H5 下拉加载更多(模拟微信聊天记录）
杏子
10-09 5334
前段时间用H5实现一个实时聊天的功能。发现很难实现像微信聊天记录一样下拉加载更多记录。市面上大部分的 Web 项目实现的效果都是上拉加载，下拉刷新。下拉加载更多很少见，下拉在加载数据方面与上拉是一样的，但是如何做到像微信聊天记录一样，下拉之后还是保留在原有的位置就需要思考一下了。
Vue 聊天功能中，图片加载完成，页面滚动到底部的解决方式
k17775711225的博客
07-03 745
这里以vant为例完成后，图片就能在加载完成之后滚动到底部了。
VUE中如何让滚动条保持在最底部（数据实时更新，页面高度随时变化）
热门推荐
旧守一梦的博客
12-16 2万+
先说需求： 数据实时更新渲染到页面 页面高度随数据更新变化 默认页面显示当前更新内容即滚动条处于页面最底部 当用户进行鼠标滚轮向上滚动或者拖动滚动条向上时停止滚动条处于页面最底部操作 当用户进行上一步操作后又向下滚动时 继续让滚动条保持最下 思路： 首先得监听页面的scroll时间并判断是向上或者向下滚动 让滚动条保持在页面最底部 data() { return { oldScrollTop:0, scrollFlag:true,
ag-grid-vue 滚动条触底加载更多
06-06
`ag-Grid-Vue` 是一个基于 Vue.js 的 `ag-Grid` 的封装组件，它是 `ag-Grid`（一个功能强大的数据表格和网格组件库）在 Vue 框架中的实现。滚动条触底加载更多（Infinite Scroll or Virtual Scrolling）是 ag-Grid 提供的一种功能，用于在用户滚动到表格底部时自动加载更多行，而不是一次性加载所有数据，从而提高性能和用户体验。 在 ag-Grid-Vue 中实现滚动条触底加载更多的步骤通常包括： 1. 配置列：在 ag-Grid 的列定义中启用 `infiniteScroll` 属性，并设置 `scrollThreshold` 参数，指定当滚动到底部多少距离时触发加载。例如： ```html <ag-grid-vue :columnDefs="columnDefs" :infiniteScroll="true" scrollThreshold="100"></ag-grid-vue> ``` 这里 `100` 表示当滚动条距离底部小于100px时开始加载更多数据。 2. 数据分页：你需要确保数据源是分页的，可以使用 ag-Grid 的 `gridApi.getRowNode` 方法获取当前可视区域的行号范围，然后从后向前逐页加载。 3. 加载事件处理：在 Vue 组件中监听 `onGridReady` 或其他适当的事件，当滚动到底部时触发加载更多数据的请求，并更新数据源。示例： ```javascript mounted() { this.gridApi.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll(params) { if (params.isEnd && params.isLastRenderedPage) { // 加载更多数据 this.loadMoreData(); } }, loadMoreData() { // 假设你有一个接口 `loadNextPage` 用于请求更多数据 this.loadNextPage().then(() => { // 更新行数，告诉 ag-Grid 加载完成 this.gridApi.sizeColumnsToFit(); }); } } ``` 4. 更新视图：加载新数据后，你需要将其添加到现有数据的末尾，并调用 `gridApi.sizeColumnsToFit()` 来调整列宽以适应新的内容。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值