element的Loading 加载设置“加载“的位置始终居中

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

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

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

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

<template><div class="add-base"><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;
}

element的Loading 加载设置“加载“的位置始终居中相关推荐

css设置background图片的位置实现居中
/* 例 1: 默认值 */ background-position: 0 0; /* 元素的左上角 */ /* 例 2: 把图片向右移动 */ background-position: 75px 0 ...
Unity可自定义loading页的异步加载工具，免费下载，使用说明
本文是针对ZTools中异步加载工具的使用说明,包含实现过程以及如何使用免费下载地址:请到[ https://gitee.com/jacobkay/unity-ZTools-LoadSceneAs ...
highchart图表设置加载页面
当我们采用异步请求加载数据较大加载速度较慢时,我们可以给highchart图表设置loading页面. var chart_1= Highcharts.chart('container1', {cha ...
小程序中使用loading组件显示正在加载
三步实现小程序loading组件显示正在加载第一步先在wxml中编写点击事件按钮 <button type="default" bindtap="loadingN ...
idea 设置加载多个资源文件,显示本地图片
idea 经常只会设置一个资源路径,这个路径就是项目的路径.但是当要加载的文件处于其他位置时,则需要增加虚拟路径的配置. 如图:第一个是项目路径第二个是图片路径转载于:https://www.cn ...
sony android电视关机,【索尼 KDL-48WM15B 48英寸 LED电视使用体验】通电|待机|关机|加载|设置_摘要频道_什么值得买...
索尼 KDL-48WM15B 48英寸 LED电视使用体验(通电|待机|关机|加载|设置) 第一次接上功率插座,电视还没开,功率插座跳到7W,可能会跟我一样觉得"技术索尼"真是XX ...
android webview设置加载进度条
1.自定义属性文件--attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources& ...
js在html之前加载,js加载前显示loading（页面加载前）
工作中遇到,需要加loading.1.用jquery的load方法读取页面,页面读取完成前显示loading.2.首页js等加载过慢,页面加载完成前显示loading. (1).jquery .loa ...
QML 地图修改插件源码（三），Map在Plugin中设置加载地图类型
常用的地图种类分为交通图,地形图,卫星图等等,在QML的Map(以OSM地图为例)中提供activeMapType属性用于读取当前显示的地图类型(注意:该属性为只读属性,不能用于赋值),QML中地图的 ...

element的Loading 加载设置“加载“的位置始终居中

element的Loading 加载设置“加载“的位置始终居中相关推荐

最新文章

热门文章