无聊写了一个JS下拉加载插件,有需要的可以下载。

// 使用
// new ManDownLoad("#ul","json/load.json",function(data,obj){
// var str = "";
// data.data.forEach(function(item,index){
// str += "<li>" + item.title + "</li>";
// });
// return str;
// },{
// type:"POST",
// data:{
// "hello":"world",
// "fa":"bbb"
// }
// });
;function ManDownLoad(element,url,callback,obj){
this.element = element;
if((typeof element)==="string"){
this.element = document.querySelector(element);
}
this.url = url;
this.callback = callback;
var options = {
type:"GET",
distance:0,
dataType:"json",
data:{}
};
this.config = this.extend(options,obj);
this.init();
};
ManDownLoad.prototype = {
init:function(){
var _this = this;
this.isBottom();
window.addEventListener("scroll",this.isBottom);
},
// 判断是否到达底部
isBottom:function(){
var _this = this;
var scrollH = null,
clientHeight = null,
scrollTop = null,
h = 0; scrollH = document.body.scrollHeight||document.documentElement.scrollHeight;
clientHeight = window.innerHeight;
scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
h = clientHeight + scrollTop;
if(h>=scrollH-_this.config.distance){
_this.ajax();
}
},
// 发送AJAX请求
ajax:function(){
var _this = this;
var xhr = new XMLHttpRequest();
var data = null; xhr.open(this.config.type,this.url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
if(_this.config.dataType==="json"){
data = _this.callback(JSON.parse(xhr.responseText),_this);
}else{
data = _this.callback(xhr.responseText,_this);
}
if(data===false){
window.removeEventListener("scroll",_this.isBottom);
}
_this.addHTML(data,function(){
_this.isBottom();
});
}
}
xhr.send(_this.toFormStr(_this.config.data));
},
addHTML:function(data,callback){
if(!data)return;
if((typeof data)==="string"){
this.element.innerHTML += data;
}else{
this.element.appendChild(data);
}
callback&&callback();
},
toFormStr:function(obj){
var str = "";
for(var k in obj){
str += k + "=" + obj[k] + "&";
}
return str.slice(0,-1);
},
extend:function(obj,obj2){
if(!obj)return obj2;
for(var k in obj2){
obj[k] = obj2[k];
}
return obj;
}
};

原生JS下拉加载插件分享。的更多相关文章

  1. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  2. js 下拉加载

    // 下拉加载    var clientHeight = $(window).height() //当前可视的页面高度    console.log(clientHeight) //滚动条到页面底部 ...

  3. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...

  4. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

  5. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  6. 美团、点评、猫眼App下拉加载效果的源码分享

    今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果   以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...

  7. 移动端好用的下拉加载上拉刷新插件 dropload插件

    入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...

  8. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  9. 下拉加载dropload.js

    使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...

随机推荐

  1. ORACLE如何比较两个数据库的差异

    ORACLE怎么比较两个数据库的差异 方法1:使用PL-SQL工具 点击 工具->比较用户对象

  2. Codeforces Round #368 (Div. 2)

    直达–>Codeforces Round #368 (Div. 2) A Brain’s Photos 给你一个NxM的矩阵,一个字母代表一种颜色,如果有”C”,”M”,”Y”三种中任意一种就输 ...

  3. 在VS2012下静态链接MFC的问题

    1>------ 已启动生成: 项目: MFCApplication1, 配置: Debug Win32 ------1>uafxcwd.lib(afxctrlcontainer2.obj ...

  4. iOS判断对象相等 重写isEqual、isEqualToClass、hash

    相等的概念是探究哲学和数学的核心,并且对道德.公正和公共政策的问题有着深远的影响. 从一个经验主义者的角度来看,两个物体不能依据一些观测标准中分辨出来,它们就是相等的.在人文方面,平等主义者认为相等意 ...

  5. 自定义 TableViewCell 的分割线

    刚开始自定义 tableViewCell 的时候,用的是直接在 cell 上加一张 imageView 的方法,如果在点击 cell 的时候有页面的跳转,这样做没什么问题,但是,如果在点击 cell ...

  6. About kaychen

    关于我 现武汉科技大学,大二学生.互联网前端技术爱好者,未来想从事前端开发工作.进入前端开发领域之前,作为创始人之一,创建了武汉江城时空电子商务有限责任公司.目前在海投网前端开发小组实习.热爱互联网行 ...

  7. [IOS]Swift 遍历预制的本地资源文件

    我事先放了一堆svg文件,但是我是批量使用的,想要直接遍历他们加入到一个list中来,那我直接就遍历他们的名称,把他们的名字组成一个array. var ss:NSString = NSBundle. ...

  8. js正则获取url所带参数值

    在js字符串对象原型中添加这个获取链接参数值方法,getAddrVal(): String.prototype.getAddrVal = String.prototype.getAddrVal||fu ...

  9. AJAX回调函数,返回JSON格式,应该返回自定义状态STATUS,但是却返回200

    返回200应该是方法已经执行通的意思,但是没返回自定义的status,仔细一看json格式拼错了...

  10. 解决word2013图片不能替换

    有时我们下好文档时,想要替换里面的图片,右键时却发现没有替换图片这个选项 这是应为此时我们的文档处于兼容模式,我们可以把它另存为.docx格式,这是再右键便可发现,多了一个替换图片选项.