vue中如何动态获取剩余区域的滚动高度

更新时间：2023年05月19日 09:26:28 作者：qq_36437172

这篇文章主要介绍了vue中如何动态获取剩余区域的滚动高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue动态获取剩余区域的滚动高度

需求

通过获取屏幕的高度，减去【固定】高度，剩下的高度为【内容】滚动高度。

我们通过下面代码获取屏幕高度：

document.documentElement.clientHeight || document.body.clientHeight;

所谓的固定高度，应该是一直停留在屏幕可见范围中，不根据内容进行滚动。

如果这个固定高度是一些静态资源时，我们只需通过设置 ref 获取元素的高度。

<div class="index-banner-img">
  <img :src="bannerImg" ref="imgSize" alt="">
</div>

let imgHeight = this.$refs['imgSize'].height

那么这样就很容易的获取到内容的滚动高度，代码如下：

getScollerHeight() {
  setTimeout(() => {
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    let imgHeight = this.$refs['imgSize'].height
    this.scrollHeight = (clientHeight - imgHeight) + 'px'
  }, 100)
}
mounted() {
  this.getScollerHeight()
},

vue获取元素高度总是不准确问题

打算用一个websocket写一个简易的聊天系统。

后端代码很容易就写好，但是前端是真的难搞，遇到一个很严重的问题：

当发送一条消息或者是收到一条消息，消息展示界面不能滑到最下面，展示最新消息，于是，经过一段时间的修改，发送新消息时，滚动条虽然能下滑，但是滑不到最底部，于是我添加了一个按钮，使用按钮，将滚动条滑到最底部是可行的。又使用debug调试，发现：vue会先执行你的其它方法，再渲染页面，导致总是只能滑到上一条消息展示的高度。

于是我再百度，发现：重置数据后，获取dom元素高时，dom元素还未渲染完毕，（可能这就是为什么只能滑到上一条消息展示的地方）

解决办法

this.$nextTick()函数：在下次DOM更新循环结束之后执行延迟回调

this.$nextTick(()=>{ 
     this.goBottom(); // 滚动条滑到底部的方法
   })

补充：使用vue获取一个指定的元素的高度，可以使用vue的ref

当ref加在普通的元素上，使用this.ref.name获取到的是dom元素

下面是聊天的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微聊</title>
    <script src="../static/js/vue.js"></script>
    <style>
        .cheet-box{
            width: 592px;
            height: 160px;
        }
        .box{
            /*margin: 0 auto;*/
            /*overflow:auto;*/
            overflow-y: auto;
            overflow-x: hidden;
            font-family: "微软雅黑 Light";
            width: 600px;
            height: 300px;
            background-color: #ecece9;
            border: none;
            box-shadow: aliceblue;
            margin-bottom: 20px;
            padding: 50px;
        }
        .to,.me{
            word-wrap:break-word;
            display: block;
            width: 50%;
            padding: 26px;
            border-radius: 10px;
            background-color: #fff;
            margin: 5px 0 10px 0;
        }
        .system-log{
            padding: 5px 0;
            color: darkgrey;
            text-align: center;
        }
        .to{
            float: left;
        }
        .me{
            float: right;
        }
    </style>
</head>
<body onbeforeunload="checkLeave()">
    <div id="app">
        <div class="box" id="box" ref="getHeight">
            <div v-for="item in messageArray">
<!--                <div class="system-log">连接成功...</div>-->
                <div class="to" v-if="item.username != message.username" v-text="item.text">
                </div>
                <div class="me" v-else  v-text="item.text">
                    aaaaaa
                </div>
            </div>
        </div>
        <div>
            <input type="text" v-model="message.username">
        </div>
        <div>
            <textarea type="text" v-model="message.text" class="cheet-box"></textarea>
            <input @click="sendMessage()" type="button" value="发送"/>
            <input @click="goBottom()" type="button" value="底部"/>
        </div>
    </div>
    <script>
        function checkLeave(){
            sessionStorage.setItem('key','hello');
            localStorage.setItem('2','3')
        }
        var websocket ;
        var vm = new Vue({
           el:'#app',
            created(){
                this.initWebSocket();
            },
            data:{
                    message:{
                        username:'',
                        text:'',
                    },
                messageArray:[
                ],
            },
            methods:{
               initWebSocket(){
                   if (typeof (WebSocket)=="undefined"){
                       alert('浏览器不支持WebSocket')
                   }else {
                       console.log('浏览器支持websocket')
                       websocket = new WebSocket("ws://localhost:8080/ws/asset");
                       //连接打开事件
                       websocket.onopen = function() {
                           console.log("Socket 已打开");
                           var obj = {
                               text:'',
                               username: '',
                               log:'连接成功！'
                           }
                           websocket.send(JSON.stringify(obj));
                       };
                       //收到消息事件
                       websocket.onmessage = function(msg) {
                               vm.pushArray(msg.data)
                       };
                           //连接关闭事件
                       websocket.onclose = function() {
                           console.log("Socket已关闭");
                       };
                       //发生了错误事件
                       websocket.onerror = function() {
                           alert("Socket发生了错误");
                       }
                       //窗口关闭时，关闭连接
                       window.unload=function() {
                           websocket.close();
                       };
                   }
               },
                sendMessage(){
                    websocket.send(JSON.stringify(this.message));
                    this.message.text = ''
                },
                pushArray(msg){
                    let message = JSON.parse(msg);
                    console.log(message)
                    if (message.username!='' && message.text!=''){
                        this.messageArray.push(message)
                        this.$nextTick(()=>{
                            this.goBottom();
                        })
                    }
                },
                goBottom(){
                    let box = document.getElementById('box');
                    box.getBoundingClientRect().height
                    box.scrollTo(0,box.scrollHeight-box.clientHeight)
                }
            }
        })
    </script>
</body>
</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决
这篇文章主要介绍了vue使用多级弹窗(Dialog)出现蒙版遮罩问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
Vue 3.0自定义指令的使用入门
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指令。接下来，将使用Vue 3官方文档自定义指令章节中使用的示例，来一步步揭开自定义指令背后的秘密。
2021-05-05
vue router导航守卫（router.beforeEach()）的使用详解
导航守卫主要用来通过跳转或取消的方式守卫导航。这篇文章主要介绍了vue-router导航守卫（router.beforeEach()）的使用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
bmob js-sdk 在vue中的使用教程
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。下面通过本文给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧
2018-01-01
Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法
这篇文章主要介绍了Vue + SpringBoot 实现文件的断点上传、秒传存储到Minio的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-06-06
Vue组件通信实践记录（推荐）
本篇文章主要介绍了Vue组件通信实践记录（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue3.0语法糖内的defineProps及defineEmits解析
这篇文章主要介绍了vue3.0语法糖内的defineProps及defineEmits解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue自定义组件双向绑定实现原理及方法详解
这篇文章主要介绍了Vue自定义组件双向绑定实现原理及方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
vue el-radio单选传值和默认选中方式
文章介绍了一个父组件和子组件的交互过程,父组件通过点击“关联公司”输入框弹出子组件dialog,子组件中使用SelectCompany.vue实现默认选中功能,作者分享了个人经验,希望能对大家有所帮助
2025-01-01
vue服务端渲染缓存应用详解
vue缓存分为页面缓存、组建缓存、接口缓存，这里我主要说到了页面缓存和组建缓存。接下来通过本文给大家介绍vue服务端渲染缓存应用 ,需要的朋友可以参考下
2018-09-09