上拉加载的思路

1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据

2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用

Javascript:
alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等
alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽 Jquery
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

  

 //获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
} //获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
} //获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
var upDown = function (opt) {
opt = opt || {};
var up = opt.up || function () {
};
window.onscroll = function () {
if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
if(is_scroll === true){ //当这个为true的时候调用up方法 ....is_scroll没看懂往下看
   up();
  }}
        }
};

3.首先要默认加载第一页,在window.onload调用upDown这个方法

   window.onload = function () {
getData();//页面加载完就显示了第一页
upDown({
up: getData
});
}

4.当页面滚到底部的时候触发up()这个方法,up调用getdata这个方法.下面就是怎么获取数据了

在全局定义两个变量 var is_scroll = true;var count = 0;

ajax的就不介绍了 可以看这个http://www.cnblogs.com/seanlxj/diary/2018/01/30/8385498.html

var is_scroll = true;
var count = 0;
function getAjax() {
var el, li;
var xhr = new XMLHttpRequest();
xhr.open('get', 'page' + count + '.json');
xhr.send();
xhr.onreadystatechange = function () {
var loadingEnd = document.getElementById('loadingEnd');
var dropLoad = document.getElementById('dropLoad');
if (xhr.readyState === 4 && xhr.status === 200) {
        
var res = xhr.responseText;
var data = JSON.parse(res);
allData = allData.concat(data);//新的一页拼接到后面;
if (data.length === 0) { //当获取到的数据长度为0 说明没有count+是请求不到数据了
is_scroll = true // 定义为true
loadingEnd.style.display = 'block'; //显示没有数据
}
el = document.querySelector("#wrapper ul");
for (var k in data) { //遍历获取到的每一条数据
li = document.createElement('li'); // 创建节点
li.innerHTML = "<div class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></div><div class='item-time'>" + data[k].time + "</div><div class='bottom-line'></div>";
el.appendChild(li, el.childNodes[0]);
}
dropLoad.style.display = 'block';//显示加载中
} else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画
setTimeout(function () {
dropLoad.style.display = 'none';
}, 500)
}
};
}
  <style>
.drop-load {
text-align: center;
height: 80px;
line-height: 50px;
} .drop-load .loading {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 100%;
margin: 6px;
border: 2px solid #666;
border-bottom-color: transparent;
vertical-align: middle;
-webkit-animation: rotate 0.75s linear infinite;
animation: rotate 0.75s linear infinite;
} @-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
} @keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
} .loadingEnd {
font-size: 0.3rem;
color: black;
width: 100%;
height: 40px;
text-align: center;
} </style>
<body>
<div>
<ul>
</ul>
</div>
<div id="dropLoad" class="drop-load" style="display: none">
<span class="loading"></span>
<span>加载中</span>
</div>
<div id="loadingEnd" class="loadingEnd" style="display: none">到底了</div>
</body>

原生ajax写的上拉加载的更多相关文章

  1. 用jquery写一个上拉加载

    /*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...

  2. 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法

    1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...

  3. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  4. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  5. js_原生js实现上拉加载更多的功能。

    1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...

  6. 原生js实现上拉加载

    原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~ 好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数 ...

  7. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  8. framework7 上拉加载一些ajax问题

    1.请求第一组数据后如果不能产生上拉进度条,则无法进行上拉加载. 解决办法:首次加载的数据量设置合理即可. 2.同一组数据请求多次,原因是异步刷新时间差,请求参数未更新,多次触发了上拉加载. 解决办法 ...

  9. 自己写的,然后配合zepto+iscroll的上拉加载

    /** * Created by jl on 2016/3/28. *///初始化绑定iScroll控件var actHtml="";var myScroll,    pullUp ...

随机推荐

  1. 数据存储之Web存储(sessionStorage localStorage globalStorage )

    Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...

  2. Django_生产环境静态文件配置

    需求: 当Django项目运行在线上的时候,需要关闭debug模式,那么Django设置中,静态文件路径配置将会失效,如何解决这个问题? 问题原因: Django默认关闭debug模式,Django错 ...

  3. .net Core学习笔记3 编辑列表并绑定下拉列

    本次主要实现列表的编辑及下拉列表的绑定 先看效果图: 主要用DropDownList绑定下拉列后端代码: 1:定义一个存下拉数据类 public class SelectItem { public s ...

  4. centos7安装python3.6

    安装python3.6可能使用的依赖 # yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sql ...

  5. Linux实践篇--linux软件的安装,更新与卸载

    本文出处:http://www.cnblogs.com/lhj588/archive/2012/07/17/2595328.html,感谢作者分享. Linux常见的安装为tar,zip,gz,rpm ...

  6. hibernate 基础

    Hibernate:是开源的ORM框架技术,对jdbc进行了非常轻量级的对象封装,处于业务逻辑层和数据库层之间,称作持久化层. 持久化层的作用:把程序生成的对象持久化到数据库,也就是保存到数据库.   ...

  7. 字体类形:font-family, font-style

    语法:{font-family:字体1,字体2,字体3,...} 作用:调用客户端字体 font-family: "Lantinghei SC","Microsoft Y ...

  8. android dialog弹出的情况下监听返回键

    view = LayoutInflater.from(getActivity()).inflate( R.layout.dialog_tips, null); title2 = (TextView) ...

  9. AM调制的FPGA实现

    一.说明: 功能:AM调制 平台:Vivado 2016.4 和 Matlab R2017a 二.原理: 1. AM调制原理 AM已调信号的时域表达式: 已调信号的频域表达式: 本质上AM调制就是频谱 ...

  10. opencv学习手稿(01开篇-显示一张图片)

    使用python36 源码: #-*- coding:utf-8 -*- import cv2 from PIL import Image, ImageTk import numpy as np # ...