Vue实现渲染数据后控制滚动条位置📜

Vue实现渲染数据后控制滚动条位置📜需求场景如下:实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部。先来看看最终实现的效果 使用setTimeout(),将DOM操作改为异步(我的解决方案)。

遇到难以解决的问题,调整心态,换种思路也许会有意外的收获。

前言

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

Vue实现渲染数据后控制滚动条位置📜

实现思路

  • 渲染完数据后,通过refs对象获取消息容器的实际高度
  • 将滚动条的设置到最底部

实现过程

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

踩坑记录

  • 直接设置滚动条的位置

    数据渲染完成后直接获取元素的真实高度,设置滚动条的位置,讲道理好像没什么毛病,结果滚动条的高度没有预想的渲染。问题原因:数据渲染完成后,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实现渲染数据后控制滚动条位置📜
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);
  • 正确的实现方式:使用nextTick实现

    感谢评论区掘友指出的错误,Vue官方有提供现成的解决方案。nextTick的作用为:当数据更新了,在dom中渲染后,自动执行该函数.

    this.$nextTick(function(){
        this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
        console.log("当前滚动条位置:"+this.$refs.messagesContainer.scrollTop);
        console.log("当前可滚动区域容器的高度:"+this.$refs.messagesContainer.scrollHeight);
    });
    

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,如需转载请评论区留言💌

今天的文章Vue实现渲染数据后控制滚动条位置📜分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20456.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注