Html
    Css
    Js

    
                        
html,body {
	overflow:hidden;
}
.page {
	width:100%;
	height:100%;
	background:#f7f7f7;
	position:absolute;
	top:0;
	left:0;
	overflow:scroll;
}
.content {
	/* padding:20px;
	*/
        /* max-height:340px;
	*/
        /* overflow:auto;
	*/
        transition:0.2s;
}
li {
	padding:20px;
	height:20px;
	margin:10px;
	background:white;
}
.refresh-loading {
	height:50px;
	line-height:50px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:-50px;
}
.type-1 .con,.refresh-loading .g-m--c {
	width:16px;
	height:16px;
	border-radius:50%;
	-webkit-animation-name:locate-loading;
	-moz-animation-name:locate-loading;
	animation-name:locate-loading;
	-webkit-animation-duration:1.58s;
	-moz-animation-duration:1.58s;
	animation-duration:1.58s;
	-webkit-animation-timing-function:linear;
	-moz-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	border-top:2px solid #f43939;
	border-left:2px solid #df5555;
	margin-right:10px;
}
@keyframes locate-loading {
	0% {
	opacity:1;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	opacity:1;
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	transform:rotate(360deg);
}
}@-webkit-keyframes locate-loading {
	0% {
	opacity:1;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	opacity:1;
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	transform:rotate(360deg);
}
}@-moz-keyframes locate-loading {
	0% {
	opacity:1;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	transform:rotate(0deg);
}
100% {
	opacity:1;
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	transform:rotate(360deg);
}
}.refresh-text {
	color:#999;
	text-align:center;
	font-size:12px;
}
.refresh-down {
	display:none;
	margin-right:10px;
}
.refresh-down.is-rotate {
	transform:rotate(180deg);
}
.finish {
	color:#999;
	font-size:12px;
	height:50px;
	line-height:50px;
	text-align:center;
}
.more-c {
	font-size:12px;
	color:#999;
}
.more-c .con {
	margin:0 5px 0 0;
}
.more-c .type {
	height:50px;
	line-height:50px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.type-1:after {
	content:'加载中...';
	display:inline-block;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

js上拉加载下拉刷新代码

更新时间:2021-07-16 00:58:23

<div class="page"></div>

作为最外层滚动盒子,可以根据自己需求进行修改

<div class="content"></div>

作为下拉刷新动画盒子

<div class="scrollview"></div>

作为上拉加载内容承载

/* 加载内容的动画内容,top:bottom */
<div class="refresh-loading"></div>

下拉刷新动画内容

<div class="more-c"></div>

上拉加载动画内容

/* 完成加载时的样式 */
<div class="finish"></div>
0