由于工作的需要并鉴于网上的vue.js滚动加载方案不合适，自己写了一个简单实用的。就短短的150行代码。
组件代码
.container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;}
.loading{ width: 100%; height: 40px; position: relative; overflow: hidden; text-align: center; margin: 5px 0 ; color: #999; font-size: 13px;}
.loading-icon{color: #707070;};
.loader {
font-size: 10px;
margin: 8px auto;
text-indent: -9999em;
width: 24px;
height: 24px;
border-radius: 50%;
background: #999;
background: -moz-linear-gradient(left,#999 10%,rgba(255,255,0) 42%);
background: -webkit-linear-gradient(left,0) 42%);
background: -o-linear-gradient(left,0) 42%);
background: -ms-linear-gradient(left,0) 42%);
background: linear-gradient(to right,0) 42%);
position: relative;
-webkit-animation: load3 1s infinite linear;
animation: load3 1s infinite linear;
}
.loader:before {
width: 50%;
height: 50%;
background: #999;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #f5f5f5;
width: 72%;
height: 75%;
border-radius: 68%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div :style="'min-height:' + realMinHeight + 'px; overflow-x:hidden'">
<slot></slot>
</div>
<div class="loading" v-if="bottonLoading">
<div class="loader">加载中...</div>
</div>