劳动人事争议仲裁网站建设,wordpress vanilla,中国建设招标网站中标公告,j2ee做网站注意#xff1a;网上搜索出来的都是教你在index.html里面div idappdiv classloading/div或者在app.vue Mounte生命周期函数控制app和loading的显示和隐藏,这里会有一个问题#xff0c;就是js渲染页面需要时间#xff0c;一…注意网上搜索出来的都是教你在index.html里面div idappdiv classloading/div或者在app.vue Mounte生命周期函数控制app和loading的显示和隐藏,这里会有一个问题就是js渲染页面需要时间一样会出现几秒钟白屏。mounted包裹使用nextTick执行回调div app的内容依然没有开始渲染。
正确的做法是给loading一个z-index:-1绝对定位。当app有内容时覆盖loading确保app的内容高度至少占一屏不然会出现覆盖不全。 !DOCTYPE html
html langen
headmeta charsetUTF-8link relicon href/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1.0titledemo测试/titlestyle
body{width: 100vw;min-height: 100vh;position: relative;background-color: #ffffff;margin: 0;
}
#app{background-color: #ffffff;
}.loading-model {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;z-index: -1;}.loading {width: 100px;height: 100px;border: 10px solid #176af8;border-bottom: #cccccc 10px solid;border-radius: 50%;-webkit-animation: load 1.1s infinite linear;}-webkit-keyframes load {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}/style
/head
body
div idapp
/div
div idappLoading classloading-modeldiv classloading/div
/div
script typemodule src/src/main.ts/script
/body
/html
