欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
原生态ajax写的上拽载入案例
时间: 2020-11-13 11:35 浏览次数:
原生态ajax写的上拽载入案例|频道:AJAX|点一下: 次上拽载入的构思1 上拽载入是要把显示屏拉到最低部的情况下开启ajax恶性事件恳求数据信息2.全部要获得显示屏的高宽比 文本文档的
原生态ajax写的上拽载入案例 |频道:AJAX|点一下: 次

上拽载入的构思

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); //显示屏能用工作中区的宽

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

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); }
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这一方式.下边便是如何获得数据信息了

在全局性界定2个自变量 var is_scroll = true;var count = 0;

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) { //解析xml获得到的每一总数据
 li = document.createElement('li'); // 建立连接点
 li.innerHTML = " div span " + data[k].name + " /span span " + data[k].money + " /span /div div " + data[k].time + " /div div /div 
 el.appendChild(li, el.childNodes[0]);
 dropLoad.style.display = 'block';//显示信息载入中
 } else { //这一会有可无 是个假的 无论恳求沒有恳求到都是有一个载入中的动漫
 setTimeout(function () {
 dropLoad.style.display = 'none';
 }, 500)
 }

-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

之上这篇原生态ajax写的上拽载入案例便是网编共享给大伙儿的所有內容了,期待能给大伙儿一个参照,也期待大伙儿多多的适用本网。



Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园