vue聊天功能之滚动条自动定位到底部

【vue聊天功能之滚动条自动定位到底部】的更多相关文章

vue聊天功能之滚动条自动定位到底部

一.问题描述首次进入聊天窗口,数据加载之后先显示最早消息,后显示最新消息,也就是数据加载完之后,延迟了一个时间滚动条才自动定位到最底部. 二.解决方案如果数据在刚好加载完的时候滚动条就定位到了最底部就好了,就不会在进入聊天窗口之后还看到滚动条在往下滚动,出现的问题就是因为获取数据和设置滚动条位置的代码不是同步的不是按顺序执行的,后者加了定时器. 像微信聊天窗口一样,一进入到聊天窗口就看到滚动条是在聊天窗口的最底部. 聊天窗口是一个组件,调起的不同的用户的聊天窗口都是这一个聊天窗口组件. 聊天…

vue 内容增加滚动条自动定位至底部

this.$nextTick(() => { document.body.scrollTop = document.body.scrollHeight; console.log(document.body.scrollTop); }); 数据改变之后,DOM 并没有立即发生变化,所以 document.body.scrollTop 还是上一次 DOM更新之后的值. Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新.$nextTick 是在下次 DO…

Vue聊天框默认滚动到底部

功能场景在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话.如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可以看到最新的聊天消息. 实现原理通过每一次的数据变化,只要数据变化,将滚动的最大高度赋值给滚动条的最大高度. scrollHeight:滚动条高度 scrollTop: 距离最顶部高度实现过程在vue中  <template&g…

vue聊天室|h5+vue仿微信聊天界面|vue仿微信

一.项目简介基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现了微信聊天下拉刷新.发送消息.表情(动图),图片.视频预览,打赏.红包等功能. 二.技术栈 MVVM框架:Vue.js 2.0 状态管理:Vuex 页面路由:Vue-router 弹窗插件:wcPop 打包工具:webpack 2.0 环境配置:node.js + cnpm 图片插件:vue-pho…

MVC实现类似QQ的网页聊天功能-ajax（下）

此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一个小的div放聊天信息,第二个div(height:0px;overflow:hidden),当页面加载聊天内容时第二个小的div调用scrollIntoView()方法即可将滚动条置底.滚动条置底效果: 其次说一下输入框: 输入框用的是KindEditor富文本编辑器插件,需要引入kindedit…

WebSocket(3)---实现一对一聊天功能

实现一对一聊天功能功能介绍:实现A和B单独聊天功能,即A发消息给B只能B接收,同样B向A发消息只能A接收. 本篇博客是在上一遍基础上搭建,上一篇博客地址:[WebSocket]---实现游戏公告功能.底部有源码. 先看演示效果: 一.案例解析 1.PTPContoller /** * 功能描述:简单版单人聊天 * 这里没有用到@SendTo("/topic/game_chat")来指定订阅地址,而是通过SimpMessagingTemplate来指定 */ @Controller p…

socket实现聊天功能(二)

socket实现聊天功能(二) WebSocket协议是建立在HTTP协议之上,因此创建websocket服务时需要调用http模块的createServer方法.将生成的server作为参数传入socket.io的方法中.如下代码: var express = require('express'); var app = express(); var server = require('http').createServer(app); var io = require('socket.io')…