本文介绍: 问题描述,给页面设置加载中的样式,但是由于数据量很大,数据在逐步渲染的同时,页面高度也随之变高,出现竖向滚动条,这时候加载中的那个“圈圈”也跟着页面滚走了,显示如下解决办法:我是投机取巧的方法,如果有更好方法,欢迎留言告诉我~首先,我设置一个什么用的div然后让它的高度宽度正好盖住页面然后,将vloading事件放在这个div上,将div的设为position: absolute,这样不占用空间,不影响页面其他布局注意,高度动态获取,不然换一个显示器,就不能刚好完.

问题描述:给页面设置加载中的样式,但是由于数据量很大,数据在逐步渲染的同时,页面高度也随之变化,出现竖向滚动条,这时候的加载中的那个“圈圈”也跟着页面滚走了,显示如下

解决办法:我是投机取巧的方法,如果有更好方法,欢迎留言告诉我~

首先,我设置一个什么用的div,接着让它的高度和宽度正好盖住页面;

最后,将v-loading事件放在这个div上,将div的设为position: absolute,这样不占用空间,不影响页面其他布局,设置绝对布局又会影响到自身高度,所以我又多加个了v-show,当加载好后直接隐藏这个无用的div,避免它把我的操作按钮给挡住点击不了,你们也可试试设置z-index能不能解决

<template>
  <div class="add-base"&gt;
    <div 
       v-show="loading"
       class="loading-div" 
       v-loading="loading" 
       :style="{height:windowHeight + 'px'}>        
    </div>
    <div>我才是页面显示内容</div>
  </div>
</template>

export default {
  data () {
    return {
        windowHeight: document.documentElement.clientHeight, // 实时屏幕高度
    }
  }
}


.loading-div {
  width: 100%;
  position: absolute;
}

发表回复

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