（效果一）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事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
随机推荐
- 《Spring Boot 实战》随记
第一部分 Spring 4.x 1. Spring基础 略过 2. Spring常用配置 2.1 Bean的scope 使用@Scope注解配置scope.默认signleton,原型模式protot ...
- DATEDIFF（） 返回2个日期之间的间隔
SELECT DATEDIFF(day,'2008-12-29','2008-12-30') AS DiffDate 解释: 第一个参数 day 表示 返回2个日期间隔的 个间隔类型 是 日期:结果 ...
- SVN使用—常用命令及避免冲突的方法
一.SVN启动 [root@localhost ~]# mkdir /data/svn [root@localhost ~]# svnadmin create /data/svn/test [root ...
- 验证环境中的program为什么必须是automatic
最近在项目中,发现验证环境中的顶层的program(一般将program作为验证环境的入口),都是automatic的. 其实Program默认是static的,那么为什么需要把验证环境做成autom ...
- J2EE--Hibernate基础笔记
因为写的是基础内容,所以在这里,(映射集合.映射组件.复合主键和联合主键,jpa annotation,关联映射,hql等等实用内容)都不会提到- 这里写的就是试用李刚<J2EE实战>那本 ...
- JavaWeb 自定义标签库开发传统标签
自定义标签主要用于移除Jsp页面中的java代码. 移除jsp页面中的java代码,只需要完成两个步骤: 编写一个实现Tag接口的Java类,并覆盖doStartTag方法,把jsp页面中的java代 ...
- 1163: [Baltic2008]Mafia
1163: [Baltic2008]Mafia Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 123 Solved: 70[Submit][Stat ...
- spring和hibernate整合时报sessionFactory无法获取默认Bean Validation factory
Hibernate 3.6以上版本在用junit测试时会提示错误: Unable to get the default Bean Validation factory spring和hibernate ...
- Cnblog页面美化小记
Cnblog页面美化小记 这两天我在网上翻找了许许多多的资料,打开了不计其数的博客,对着\(js\).\(html\).\(css\)等文件删删改改,在浏览器和\(vscode\)间辗转腾挪...总算 ...
- Linux平台上DPDK入门指南
1. 简介 本文档包含DPDK软件安装和配置的相关说明.旨在帮助用户快速启动和运行软件.文档主要描述了在Linux环境下编译和 运行DPDK应用程序,但是文档并不深入DPDK的具体实现细节. 1.1. ...