Vue实现渲染数据后控制滚动条位置(推荐)-创新互联
需求场景如下:
成都创新互联公司IDC提供业务:西部信息中心,成都服务器租用,西部信息中心,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果
实现思路
- 渲染完数据后,通过refs对象获取消息容器的实际高度
- 将滚动条的设置到最底部
实现过程
sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this.messagesContainerTimer = setTimeout(()=>{ this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight; console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop); console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight); // 清理定时器 clearTimeout(this.messagesContainerTimer); },0); }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:Vue实现渲染数据后控制滚动条位置(推荐)-创新互联
标题路径:http://scyanting.com/article/giogc.html