本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下：
少废话直接上代码！！！粗暴，直接，干脆
0//lk-2017-05-04
1(function($, win) {
var defaults = {
'container': '#container', //容器
'sections': '.section', //子容器
'searchname': '全部', //搜索名称
'url': '', //加载更多数据请求的路径
'updata': 'data', //更新的数据
'page': '1', //第几页
'pagenumber': '10', //每页多少条数据
'backFn': function(d) {
}
};
//容器与最后一个子容器,状态
var container, sections, state = 0;
$.fn.isScroll = function(options) {
opts = $.extend({}, defaults, options || {});
container = $(opts.container);
sections = container.find(opts.sections).last();
var i = 0,
state = 1,
_last;
container.scroll(function() {
var lastdom=container.find(opts.sections).last();
if(container.outerHeight() + container.scrollTop() > lastdom.offset().top) {
//防止重复加载
if(_last == lastdom[0]) {
return;
} else {
_last = lastdom[0];
}
if(!state) return; //防止重复加载
state = 0;
//请求数据
$.post( opts.url,{
page: (lastdom.attr("pages") || opts.page),
pagenumber: opts.pagenumber,
name: opts.searchname
}, function(status, data) {
if(status) {
state = 1;
if(typeof(opts.backFn) == "function") {
opts.backFn('backFndata');
}
}
})
}
})
}
})(jQuery, window)
/*-------使用方法--------*/ 1 /*绑定滚动事件*/
$("#table").isScroll({
container: "#table",
sections: ".list",
searchname: "全部",
url: "wwww",
page: 1,
pagenumber: 10,
backFn: function(data) {
console.log(data);
}
})
html代码
<ul id="table" class="table">
<li class="list" v-bind:pages="item.page" v-for="item in data_list">{{item.txt}}</li>
3 </ul>
使用方法
1.此插件基于jquery，必须先加载jquery。
2.可以绑定到指定的div。
3.回掉函数返回滚动加载后的数据，接收并进行处理。