（效果一）js实现上拉加载

js实现上拉加载

/*项目查询*/

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{

margin:0;

padding:0;
}

html {

font-size: 26.67vw;

}

html,body{

height: 100%;

}

.wraper{

height: 100%;

display: -webkit-flex;

display: flex;


flex-direction: column;

-webkit-flex-direction: column;

background-color: #f1f1f1;

}

a {

text-decoration: none;

}
a:link{

color: #404040;

}

a:visited{

color: #404040;

}

a:hover{

color: #404040;

}

a:active {

color: #404040;

}

ul,ol{

list-style:none;

}

img{

border: 0;

display: block;

}
.header{

width: 100%;

height: 214px;

height: 1.07rem;

}

.header .search {

width: 100%;

height: 120px;

height: 0.6rem;

background-color: #ff4f8d;

display: flex;

align-items: center;

justify-content: center;

background-color: #ff4f8d;

box-sizing: border-box;

padding: 0.1rem 0.09rem;

}

.header .search a {

display: flex;

width: 100%;

height: 100%;

border-radius: 8px;

align-items: center;

font-size: 0.14rem;

box-sizing: border-box;

color: #fff;

background-color: #e6477f;

}

.header .search img {

width: 0.15rem;

height: 0.15rem;

margin: 0 0.14rem 0 0.12rem;

vertical-align: middle;

}

.tab {

width: 100%;

height: 0.45rem;

background-color: #fff;

box-sizing: border-box;

border-top: 1px solid #f1f1f1;

display: flex;

align-items: center;

}

.tab .nav {

width: 50%;

height: 100%;

box-sizing: border-box;

background-color: #fff;

display: flex;

align-items: center;

justify-content: center;

border-bottom: 4px solid transparent;

font-size: 0.17rem;

}

.tab .nav.active {

border-bottom: 4px solid #ff4f8d;

}

.tab .nav.active a {

color: #ff4f8d;

}

.tab .nav a {

color: #404040;

}

.medical-hd {

width: 100%;

}

.section{

width: 100%;

/*height: 100%;*/

flex: 1;

background-color: #f1f1f1;

padding: 20px 24px 0;

padding: 0.1rem 0.12rem 0;

box-sizing: border-box;

display: flex;

flex-direction: column;

}

.med-hd {

width: 100%;

height: 70px;

height: 0.35rem;

box-sizing: border-box;

color: #fff;

font-size: 28px;

font-size: 0.14rem;

display: flex;

align-items: center;

text-align: center;

}

.name {

width: 242px;

width: 1.21rem;

border-right: 1px solid #f2f2f2;

box-sizing: border-box;

}

.guige {

width: 148px;

width: 0.74rem;

border-right: 1px solid #f2f2f2;

box-sizing: border-box;

}

.yblx {

width: 161px;

width: 0.85rem;

}

.jine {

width: 151px;

width: 0.755rem;

}

.name,.guige,.yblx,.jine {

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.pink {background-color: #ff4f8d;}

.oriange {background-color: #ff990a;}
.med-bd{

width: 100%;

flex: 1;

box-sizing: border-box;

overflow-y: auto;

overflow-x: hidden;

background-color: #fff;

display: none;

}

.med-bd.focus{

display: block;

}

.med-bd .row{

width: 100%;

height: auto;

display: flex;

align-items: center;

flex-direction: row;

font-size: 0.14rem;

color: #404040;

border-bottom: 1px solid #f2f2f2;

}

.row div {

overflow: hidden;

height: auto;

min-height: 0.45rem;

_height: 0.45rem;

/*padding: 0.1rem 0.95rem;*/

box-sizing: border-box;

}

.cir {

border-right: 1px solid #f2f2f2;

}

.a {

padding-left: 0.1rem;

box-sizing: border-box;

}