zoukankan      html  css  js  c++  java

  • （效果一）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{
 100%;
height: 214px;
height: 1.07rem;
}
.header .search {
 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;
 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 {
 0.15rem;
height: 0.15rem;
margin: 0 0.14rem 0 0.12rem;
vertical-align: middle;
}
.tab {
 100%;
height: 0.45rem;
background-color: #fff;
box-sizing: border-box;
border-top: 1px solid #f1f1f1;
display: flex;
align-items: center;
}
.tab .nav {
 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 {
 100%;
}
.section{
 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 {
 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 {
 242px;
 1.21rem;
border-right: 1px solid #f2f2f2;
box-sizing: border-box;
}
.guige {
 148px;
 0.74rem;
border-right: 1px solid #f2f2f2;
box-sizing: border-box;
}
.yblx {
 161px;
 0.85rem;
}
.jine {
 151px;
 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{
 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{
 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。需要的小伙伴加上接口就可以
  • 相关阅读:
    003_&#x和ASCII的关系及URL中的中文转义
    001_机器学习的Hello world之MNIST手写数字识别模型
    Appnium安装－Mac平台
    Code Review 规范
    Spring AOP－xml配置
    JTLParser-linux上jmeter的jtl文件二次分析
    测试覆盖率Emma工具使用
    jmeter之java请求
    jmeter测试总结
    jstat监控gc情况
  • 原文地址：https://www.cnblogs.com/bgwhite/p/9375540.html
Copyright © 2011-2022 走看看