Vue.js上下滚动加载组件的实例代码
发布时间：2020-12-17 02:52:49 所属栏目：百科 来源：网络整理
导读：由于工作的需要并鉴于网上的vue.js滚动加载方案不合适，自己写了一个简单实用的。就短短的150行代码。 组件代码 div :style="'min-height:' + realMinHeight + 'px; overflow-x:hidden'"gt; slot/slot/divdiv class="loading" v-if="bottonLoading"gt; div c
|
由于工作的需要并鉴于网上的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);
}
}
源码：https://github.com/doterlin/vue-wxChat 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
