（效果一）js实现上拉加载
实现思路：获取滚动元素的高度，滚动条距离顶部的距离，滚动条的高度，
算式：可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部。
HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>项目查询</title> <link rel="stylesheet" href="xmcx.css"> </head> <body> <div class="wraper"> <div class="header"> <div class="search"><a href=""><img src="image/search.png" alt="">请输入名称进行搜索</a></div> <div class="tab"> <div class="nav active"><a href="javascript:;">药品价格</a></div> <div class="nav"><a href="javascript:;">非药品价格</a></div> </div> </div> <div class="section"> <div class="med-hd"> <div class="name pink">名称</div> <div class="guige pink">规格</div> <div class="yblx pink">医保类型</div> <div class="jine oriange">金额</div> </div> <div class="med-bd focus"> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿复方氨酚烷胺颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> </div> <div class="med-bd"> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> <div class="row"> <div class="name a">小儿咽扁颗粒</div> <div class="guige">60ml/瓶</div> <div class="yblx cir">甲类</div> <div class="jine">35.5</div> </div> </div> </div> </div> <script src="xmcx.js"></script> </body> </html>
CSS3
/*项目查询*/
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;
}
JS
function ajax({type,data,url,async=true,beforeSend,success,complete}){
// 创建xhr对象
let xhr = new XMLHttpRequest();
// 判断传入的数据的类型 为对象或者字符串
if(typeof data === 'object'){
// 遍历且进行拼接 组成格式为 a=b&c=d;
var str = '';
for(var sAttr in data){
str += encodeURIComponent(sAttr) + '=' + encodeURIComponent(data[sAttr]) + '&';
}
// 裁剪最后一个&符号
data = str.slice(0,-1);
}
// 数据的提交方式强制转化为答谢的提交方式
if(type.toUpperCase() === 'GET' && data){
url += '?' + data;
}
// 配置
xhr.open(type,url,async);
// 接收后台返回的数据
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
success && success(xhr.responseText);
}
complete && complete();
}
};
beforeSend && beforeSend();
if(type.toUpperCase() === 'POST'){
// 如果为post提交方式 在发送前将内容类型设置为application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
} else {
xhr.send();
}
}
/*
* 项目查询
* oNav: tab切换标题
* oCont: tab切换内容
* */
var oNav = document.querySelectorAll('.nav');
var oCont = document.querySelectorAll('.med-bd');
oNav[0].onclick = function () {
this.className = 'nav active';
oNav[1].className = 'nav';
oCont[0].className = 'med-bd focus';
oCont[1].className = 'med-bd';
};
oNav[1].onclick = function () {
this.className = 'nav active';
oNav[0].className = 'nav';
oCont[1].className = 'med-bd focus';
oCont[0].className = 'med-bd';
};
oCont.forEach(function (item,index,array) {
item.onscroll = function(){
console.log(item.scrollHeight + 'px');
console.log(item.scrollTop + 'px');
console.log(item.clientHeight + 'px');
if(item.clientHeight + item.scrollTop == item.scrollHeight) {
console.log("已经触底，请求数据");
ajax({
type: "GET",
data: "",
url: "",
success: function () {
console.log("请求数据成功执行")
}
})
}
}
});
注：这里需要调用后台接口，这里我只封装了ajax。需要的小伙伴加上接口就可以
作者：狗尾草
-------------------------------------------
个性签名：海到无边天作岸，山登绝顶人为峰！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！
