（效果一）js实现上拉加载
生活随笔
收集整理的這篇文章主要介紹了
（效果一）js实现上拉加载
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
實(shí)現(xiàn)思路：獲取滾動(dòng)元素的高度，滾動(dòng)條距離頂部的距離，滾動(dòng)條的高度， 算式：可視窗口的高度 + 滾動(dòng)條距離頂部的距離 == 滾動(dòng)條的高度就說明到底部。 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>項(xiàng)目查詢</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="">請輸入名稱進(jìn)行搜索</a></div>
<div class="tab">
<div class="nav active"><a href="javascript:;">藥品價(jià)格</a></div>
<div class="nav"><a href="javascript:;">非藥品價(jià)格</a></div>
</div>
</div>
<div class="section">
<div class="med-hd">
<div class="name pink">名稱</div>
<div class="guige pink">規(guī)格</div>
<div class="yblx pink">醫(yī)保類型</div>
<div class="jine oriange">金額</div>
</div>
<div class="med-bd focus">
<div class="row">
<div class="name a">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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">小兒復(fù)方氨酚烷胺顆粒</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 /*項(xiàng)目查詢*/ 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}){ // 創(chuàng)建xhr對象 let xhr = new XMLHttpRequest(); // 判斷傳入的數(shù)據(jù)的類型 為對象或者字符串 if(typeof data === 'object'){ // 遍歷且進(jìn)行拼接 組成格式為 a=b&c=d; var str = ''; for(var sAttr in data){ str += encodeURIComponent(sAttr) + '=' + encodeURIComponent(data[sAttr]) + '&'; } // 裁剪最后一個(gè)&符號(hào) data = str.slice(0,-1); } // 數(shù)據(jù)的提交方式強(qiáng)制轉(zhuǎn)化為答謝的提交方式 if(type.toUpperCase() === 'GET' && data){ url += '?' + data; } // 配置 xhr.open(type,url,async); // 接收后臺(tái)返回的數(shù)據(jù) xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ success && success(xhr.responseText); } complete && complete(); } }; beforeSend && beforeSend(); if(type.toUpperCase() === 'POST'){ // 如果為post提交方式 在發(fā)送前將內(nèi)容類型設(shè)置為application/x-www-form-urlencoded xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(data); } else { xhr.send(); } } /* * 項(xiàng)目查詢 * oNav: tab切換標(biāo)題 * oCont: tab切換內(nèi)容 * */ 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("已經(jīng)觸底，請求數(shù)據(jù)"); ajax({ type: "GET", data: "", url: "", success: function () { console.log("請求數(shù)據(jù)成功執(zhí)行") } }) } } }); 注：這里需要調(diào)用后臺(tái)接口，這里我只封裝了ajax。需要的小伙伴加上接口就可以
轉(zhuǎn)載于:https://www.cnblogs.com/bgwhite/p/9375540.html
總結(jié)
以上是生活随笔為你收集整理的（效果一）js实现上拉加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第五人格哪个角色好(《第五人格》官方网站
- 下一篇： CheXNET