（效果一）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事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
随机推荐
- Unity 自定义编辑窗体之ScriptableWizard
当我们在编辑界面要批量设置游戏资源的时候,就需要从UnityEditor里面继承,实现自己的窗口类. 所幸UNITY提供了最简单的一个自定义窗体类,我们直接往上扔public类型的属性就好,提供了确认 ...
- dbml 注意事项
1,修改dbml中的字段,需要修改2个地方
- shell-一些有趣的使用
1. 对字符串进行MD5加密 echo test |md5sum|awk '{print $1}' 字符串数量很多时可以这样做: echo test |md5sum|awk '{print $1}' ...
- 做Webservice时报错java.util.List是接口, 而 JAXB 无法处理接口。
Caused by: com.sun.xml.bind.v2.runtime.IllegalAnnotationsException: 1 counts of IllegalAnnotationExc ...
- Python 私有化属性
# 对象的基本理论 # 什么事对象? # 万物皆对象 # 对象是具体物体 # 拥有属性 # 拥有行为 # 把很多零散的东西,封装成为一个整体 # 举例:王二小 # 属性 # 姓名 # 年龄 # 身高 ...
- redis主从、集群、哨兵
redis的主从.集群.哨兵 参考: https://blog.csdn.net/robertohuang/article/details/70741575 https://blog.csdn.net ...
- LeetCode——Construct the Rectangle
LeetCode--Construct the Rectangle Question For a web developer, it is very important to know how to ...
- java基础(4)--运算符及表达式
运算符及表达式 算数运算 加(+) 减(-) 乘(*) 除(/) 取余(%) 自增(++) 自减(- -) 注意点 1. 同种类型参与运算(可能需要自动类型转换),返回同种类型 2. 整数的除法是整 ...
- Memcached set 命令
Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...
- JNI_Z_10_Java的数组
在Java中数组分为两种: (1).基本类型数组 (2).对象类型(Object[])的数组 (数组中存放的是指向Java对象中的引用) 一个能通用于两种不同类型数组的函数: GetArrayLeng ...