原生JS下拉加载插件分享。
无聊写了一个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下拉加载插件分享。的更多相关文章
- dropload.js下拉加载更多
项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...
- js 下拉加载
// 下拉加载 var clientHeight = $(window).height() //当前可视的页面高度 console.log(clientHeight) //滚动条到页面底部 ...
- js上拉加载、下拉刷新的插件
之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...
- 集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
- iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
- 美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果 以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...
- 移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
- 下拉加载更多DEMO(js实现)
项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...
- 下拉加载dropload.js
使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...
随机推荐
- 使用CocoaPods过程中 Unable to find a specification for
文章转自:http://blog.csdn.net/zhangao0086/article/details/39703083 当把CocoaPods生成的workspace移动到上层目录时,需要改下P ...
- solr4.5安装配置 linux+tomcat6.0+mmseg4j-1.9.1分词
首先先介绍下solr的安装配置 solr下载地址 (我这用的solr-4.5.0) 运行环境 JDK 1.5或更高版本 下载地址(Solr 4以上版本,要求JDK 1.6) 我用的JDK1.6 ) ...
- WP8解析JSON格式(使用Newtonsoft.Json包)
DOTA2 WebAPI请求返回的格式有两种,一种是XML,一种是JSON,默认是返回JSON格式. 这里举一个简单的解析JSON格式的例子(更多JSON操作): { "response&q ...
- 整理 PHPstorm实用个人配置,修改调整个性化快捷键,修改使用phpstorm创建的模板的默认注释:
对你有助请点赞,请顶------送人玫瑰,手留余香! 1:58 2016/3/12 整理PHPstorm实用个人配置,修改调整个性化快捷键,修改使用phpstorm创建的模板的默认注释: PHPsto ...
- bzoj 2563: 阿狸和桃子的游戏
开始写了一些东西但是后来浏览器挂了就没有存下来简直!!!!!!!!!!!!!QAQ 不想再写一遍了...总之是简单贪心. #include <iostream> #include < ...
- 使用Python中PIL图形库进行截屏
目的:通过使用Python的一个图形库PIL(Python Image Library)对屏幕进行截图 步骤: 1.下载PIL(路径)并安装 2.新建文件“截屏.py”,右键Edit with IDL ...
- shell去除换行和空格2
#!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ...
- WebClient 数据传输
数据提交 post ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...
- 如何修改SQL SERVER服务器的端口
sql server的服务器端口默认是1433,设置服务器端口的位置在这里: 这里的端口,默认是1433,我把它改成了65499 修改端口之后,客户端如何连接? 下面是SSMS的连接方式: 下面是一个 ...
- apk反编译
在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂亮的动画和精致的布局可能会让你爱不释手,作为一个开发者,你可能会很想知道这些效果界面是怎么去实现的,这时,你便可以对改应用 ...