（效果一）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="data: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。需要的小伙伴加上接口就可以
（效果一）js实现上拉加载的更多相关文章
- 原生js实现上拉加载
原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数 ...
- dropload.js（上拉加载插件使用过程中遇到的坑）
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- js_原生js实现上拉加载更多的功能。
1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...
- js实现上拉加载思路整理
1.整体模拟滚动 监听touchmove事件,比较 scrollTop 和 $scroller.scrollHeight() - $container.height(). 缺点:滑动不流畅, tran ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
随机推荐
- maven打包生成war
- 利用TokyoTyrant构建兼容Memcached协议、支持故障转移、高并发的分布式Key-value持久存储系统（转）
Tokyo Cabinet 是日本人 平林幹雄 开发的一款 DBM 数据库,该数据库读写非常快,哈希模式写入100万条数据只需0.643秒,读取100万条数据只需0.773秒,是 Berkeley D ...
- IE6/7 下：inline-block解决方案
6/IE7下:inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时, ...
- nginx2
Nginx的高可用是keeplived,keeplived是为lvs服务的. Nginx上分别安装keepalived,keepalived之间通过心跳交流,主节点宕机备节点起来.keepalived ...
- 14.python模块之subprocess
我们几乎可以在任何操作系统上通过命令行指令与操作系统进行交互,比如Linux平台下的shell.那么我们如何通过Python来完成这些命令行指令的执行呢?另外,我们应该知道的是命令行指令的执行通常有两 ...
- [POI2012] BEZ-Minimalist Security
一张n个点m条边的无向图,有点权有边权都是非负,且每条边的权值小于等于两个顶点的权值和,现在要将每个点减一个非负整数使得每条边权等于两个顶点的点权和,问最大修改代价和最小修改代价 思路神的一匹,完全想 ...
- 并发-ConcurrentHashMap源码分析
ConcurrentHashMap 参考: http://www.cnblogs.com/chengxiao/p/6842045.html https://my.oschina.net/hosee/b ...
- UniquePaths，UniquePaths2，路径问题。动态规划。
UniquePaths:给定m*n矩阵,从(0,0)到(m-1,n-1)路径条数.只能向下向右走. 算法分析:这和爬楼梯问题很像,到(m,n)的路径数是到(m-1,n)和(m,n-1)路径和.第一行, ...
- WildcardMatching和Regex，通配符匹配和正则表达式匹配
WildcardMatching:通配符匹配 算法分析: 1. 二个指针i, j分别指向字符串.匹配公式. 2. 如果匹配,直接2个指针一起前进. 3. 如果匹配公式是*,在字符串中依次匹配即可. 注 ...
- javascript onclick 函数不执行
今天被这个问题搞伤了. 原本是要给table中的元素添加onclick事件处理函数,刚开始还可以,后来就不行了,百试不得其解,反复检查,程序也没问题,耗了一个多小时,偏偏我就不信电脑会扯拐,就要看看还 ...