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); } }
上下两个