vue聊天页面在进入之后信息滑动到底部位置

same-

已于 2023-04-01 15:48:11 修改

阅读量823

点赞数 1

文章标签： vue.js javascript 前端 web application

于 2023-03-24 16:09:48 首次发布

本文链接：https://blog.csdn.net/everday_/article/details/129752500

版权

这是需要实现的目标

在这里插入图片描述

怎么做到进入到页面之后就滑动到底部？

借助两个属性

scrollHeigh:该属性是指“元素中内容”的高度。图中的意思就是全部信息所占用的总高度
scrollTop:指的是“元素中的内容”超出“元素上边界”的那部分的高度。图中的意思就是滚动条滚动的距离

根据两个属性，我们可以得到我们需要滚动到底部的距离为

滚动距离 = scrollHeigh - 容器高度

我的图示中，容器高度为380，减去就得到了我需要滚动的值

滚动距离 = scrollHeigh - 380

Vue中使用这两个属性

实例代码

watch:{
        infos(){
            //每次属性改变时，都移动到最后
            this.$nextTick(()=>{
                this.$refs.m.scrollTop = this.$refs.m.scrollHeight-380            
            })
        }
    },

代码解释

this.$refs：是Vue提供用来操作Dom元素，在容器上添加ref=‘m’属性（可以自己命名其他名称），再通过我的代码，就可以获取元素Dom，并进行操作

this.$nextTick():是用于在下一次Dom更新完成后触发，在我的代码中，在infos数据改变的时候触发，就相当于是在消息列表渲染完成之后，再进行触发滚动

自此，该功能就实现了