vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度
更新時(shí)間：2023年05月19日 09:26:28 作者：qq_36437172
這篇文章主要介紹了vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度
需求
通過獲取屏幕的高度，減去【固定】高度，剩下的高度為【內(nèi)容】滾動(dòng)高度。
我們通過下面代碼獲取屏幕高度：
document.documentElement.clientHeight || document.body.clientHeight;
所謂的固定高度，應(yīng)該是一直停留在屏幕可見范圍中，不根據(jù)內(nèi)容進(jìn)行滾動(dòng)。
如果這個(gè)固定高度是一些靜態(tài)資源時(shí)，我們只需通過設(shè)置 ref 獲取元素的高度。
<div class="index-banner-img"> ? <img :src="bannerImg" ref="imgSize" alt=""> </div>
let imgHeight = this.$refs['imgSize'].height
那么這樣就很容易的獲取到內(nèi)容的滾動(dòng)高度，代碼如下：
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獲取元素高度總是不準(zhǔn)確問題
打算用一個(gè)websocket寫一個(gè)簡(jiǎn)易的聊天系統(tǒng)。
后端代碼很容易就寫好，但是前端是真的難搞，遇到一個(gè)很嚴(yán)重的問題：
當(dāng)發(fā)送一條消息或者是收到一條消息，消息展示界面不能滑到最下面，展示最新消息，于是，經(jīng)過一段時(shí)間的修改，發(fā)送新消息時(shí)，滾動(dòng)條雖然能下滑，但是滑不到最底部，于是我添加了一個(gè)按鈕，使用按鈕，將滾動(dòng)條滑到最底部是可行的。又使用debug調(diào)試，發(fā)現(xiàn)：vue會(huì)先執(zhí)行你的其它方法，再渲染頁(yè)面，導(dǎo)致總是只能滑到上一條消息展示的高度。
于是我再百度，發(fā)現(xiàn)：重置數(shù)據(jù)后，獲取dom元素高時(shí)，dom元素還未渲染完畢，（可能這就是為什么只能滑到上一條消息展示的地方）
解決辦法
this.$nextTick()函數(shù) ：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)
this.$nextTick(()=>{?
? ? ?this.goBottom(); // 滾動(dòng)條滑到底部的方法
? ?})補(bǔ)充： 使用vue獲取一個(gè)指定的元素的高度，可以使用vue的ref
當(dāng)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="發(fā)送"/>
? ? ? ? ? ? <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)
? ? ? ? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ? ? ? ? ? ?//連接關(guān)閉事件
? ? ? ? ? ? ? ? ? ? ? ?websocket.onclose = function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ?console.log("Socket已關(guān)閉");
? ? ? ? ? ? ? ? ? ? ? ?};
? ? ? ? ? ? ? ? ? ? ? ?//發(fā)生了錯(cuò)誤事件
? ? ? ? ? ? ? ? ? ? ? ?websocket.onerror = function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ?alert("Socket發(fā)生了錯(cuò)誤");
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?//窗口關(guān)閉時(shí)，關(guān)閉連接
? ? ? ? ? ? ? ? ? ? ? ?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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決
這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
在 Vue 的項(xiàng)目中，我們經(jīng)常會(huì)遇到 v-if、v-show、v-for 或 v-model 這些內(nèi)置指令，它們?yōu)槲覀兲峁┝瞬煌墓δ?。除了使用這些內(nèi)置指令之外，Vue 也允許注冊(cè)自定義指令。接下來(lái)，將使用Vue 3官方文檔自定義指令章節(jié)中使用的示例，來(lái)一步步揭開自定義指令背后的秘密。2021-05-05
vue router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用詳解
導(dǎo)航守衛(wèi)主要用來(lái)通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
將bmob js-sdk放在static目錄，然后在index.html頁(yè)面中已 script 標(biāo)簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧2018-01-01
Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06
本篇文章主要介紹了Vue組件通信實(shí)踐記錄（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-08
vue3.0語(yǔ)法糖內(nèi)的defineProps及defineEmits解析
這篇文章主要介紹了vue3.0語(yǔ)法糖內(nèi)的defineProps及defineEmits解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
文章介紹了一個(gè)父組件和子組件的交互過程,父組件通過點(diǎn)擊“關(guān)聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實(shí)現(xiàn)默認(rèn)選中功能,作者分享了個(gè)人經(jīng)驗(yàn),希望能對(duì)大家有所幫助2025-01-01
vue緩存分為頁(yè)面緩存、組建緩存、接口緩存，這里我主要說到了頁(yè)面緩存和組建緩存。接下來(lái)通過本文給大家介紹vue服務(wù)端渲染緩存應(yīng)用 ,需要的朋友可以參考下2018-09-09