iscroll-probe实现下拉刷新和下拉加载效果
需要注意的是外部wrapper的高度,以及all的高度,须是>100%。
附加一个css3的loading
.dengl-spinner{
width:0.682rem;
height:0.682rem;
position:relative;
position:absolute;
z-index:-1;
left:50%;
margin-left:-0.341rem;
top:2.5rem;
}
.dengl-spinner1{
width:0.682rem;
height:0.682rem;
position:relative;
position:fixed;
z-index:-1;
left:50%;
margin-left:-0.341rem;
bottom:1.5rem;
}
.dengl-cube1,.dengl-cube2{
background-color:#f2513f;
width:0.682rem;
height:0.682rem;
position:absolute;
top:0;
left:0;
-webkit-animation:cubemove1.8sinfiniteease-in-out;
animation:cubemove1.8sinfiniteease-in-out;
}
.dengl-cube2{
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
@-webkit-keyframescubemove{
25%{
-webkit-transform:translateX(1rem)rotate(-90deg)scale(0.5)
}
50%{
-webkit-transform:translateX(1rem)translateY(1rem)rotate(-180deg)
}
75%{
-webkit-transform:translateX(0px)translateY(1rem)rotate(-270deg)scale(0.5)
}
100%{
-webkit-transform:rotate(-360deg)
}
}
@keyframescubemove{
25%{
transform:translateX(1rem)rotate(-90deg)scale(0.5);
-webkit-transform:translateX(1rem)rotate(-90deg)scale(0.5);
}
50%{
transform:translateX(1rem)translateY(1rem)rotate(-179deg);
-webkit-transform:translateX(1rem)translateY(1rem)rotate(-179deg);
}
50.1%{
transform:translateX(1rem)translateY(1rem)rotate(-180deg);
-webkit-transform:translateX(1rem)translateY(1rem)rotate(-180deg);
}
75%{
transform:translateX(0px)translateY(1rem)rotate(-270deg)scale(0.5);
-webkit-transform:translateX(0px)translateY(1rem)rotate(-270deg)scale(0.5);
}
100%{
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
}
}
上下两个