无聊写了一个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. android 从 phonegap 到 js webview 交互

    像生活类.办公协同类. 动态添加,下载等. 1.phonegap 我这里用了旧的版本,可能新版本变化大了. 创建asset资源文件夹,然后新建index.html copy 相应的js 文件进来. 创 ...

  2. Leetcode Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  3. 从倒影说起,谈谈 CSS 继承 inherit(转)

    从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我 ...

  4. BeautifulSoup

    参考:http://www.freebuf.com/news/special/96763.html 相关资料:http://www.jb51.net/article/65287.htm 1.Pytho ...

  5. StatePattern

    class Program { static void Main(string[] args) { var state = new OpeningState(); var lift = new Lif ...

  6. OC--init,initialize,initWithCoder:,initWithFrame:各方法的区别和加载顺序

    1.先把OC的类分清楚各有什么方法 普通类的方法 init initialize: 控制器类的方法 init initialize: initWithCoder: UI控件类的方法 init init ...

  7. Ubuntu install codeblocks by ppa

    sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update sudo apt-get install ...

  8. 在RNN中使用Dropout

    dropout在前向神经网络中效果很好,但是不能直接用于RNN,因为RNN中的循环会放大噪声,扰乱它自己的学习.那么如何让它适用于RNN,就是只将它应用于一些特定的RNN连接上.   LSTM的长期记 ...

  9. WCF自动添加消息头

    客户端自定义消息查看器实现IClientMessageInspector接口在消息发送之前添加消息头 class ClientMessageInspector : System.ServiceMode ...

  10. 新入门node.js必须要知道的概念

    一.对于一个刚入门node.js的朋友来说,一定要了解一些基础概念: 今年我正式进入社会后,发现自己所知道的IT方面的知识,真的只是牛毛,原来人外有人,山外有山,还需要继续努力.下面是一些我的自学习心 ...