温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue实现渲染数据后控制滚动条位置(推荐)

发布时间:2020-10-04 12:48:07 来源:脚本之家 阅读:1121 作者:神奇的程序员 栏目:web开发

需求场景如下:

实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果

Vue实现渲染数据后控制滚动条位置(推荐)  

实现思路

  • 渲染完数据后,通过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);
}

踩坑记录

直接设置滚动条的位置

数据渲染完成后直接获取元素的真实高度,设置滚动条的位置,讲道理好像没什么毛病,结果滚动条的高度没有预想的渲染。问题原因:数据渲染完成后,Vue此时还没有渲染DOM元素,设置的滚动条高度还是之前的容器高度。

sendMessage: function (event) {
  // 数据渲染
  this.senderMessageList.push(thisSenderMessageObj);
  // 改变滚动条位置
  this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
  console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
  console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
}

Vue实现渲染数据后控制滚动条位置(推荐)

正确的改变方式: 使用setTimeout(),将DOM操作改为异步。

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);

总结

以上所述是小编给大家介绍的Vue实现渲染数据后控制滚动条位置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI