首页 > 代码库 > js滚动加载小插件

js滚动加载小插件

本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下:

少废话直接上代码!!!粗暴,直接,干脆

 0//lk-2017-05-04 


1(function($, win) { 2 var defaults = { 3 ‘container‘: ‘#container‘, //容器 4 ‘sections‘: ‘.section‘, //子容器 5 ‘searchname‘: ‘全部‘, //搜索名称 6 ‘url‘: ‘‘, //加载更多数据请求的路径 7 ‘updata‘: ‘data‘, //更新的数据 8 ‘page‘: ‘1‘, //第几页 9 ‘pagenumber‘: ‘10‘, //每页多少条数据 10 ‘backFn‘: function(d) { 11 12 } 13 }; 14 //容器与最后一个子容器,状态 15 var container, sections, state = 0; 16 $.fn.isScroll = function(options) { 17 opts = $.extend({}, defaults, options || {}); 18 container = $(opts.container); 19 sections = container.find(opts.sections).last(); 20 var i = 0, 21 state = 1, 22 _last; 23 container.scroll(function() { 24 var lastdom=container.find(opts.sections).last(); 25 if(container.outerHeight() + container.scrollTop() > lastdom.offset().top) { 26 //防止重复加载 27 if(_last == lastdom[0]) { 28 return; 29 } else { 30 _last = lastdom[0]; 31 } 32 if(!state) return; //防止重复加载 33 state = 0; 34 //请求数据 35 $.post( opts.url,{ 36 page: (lastdom.attr("pages") || opts.page), 37 pagenumber: opts.pagenumber, 38 name: opts.searchname 39 }, function(status, data) { 40 if(status) { 41 state = 1; 42 if(typeof(opts.backFn) == "function") { 43 opts.backFn(‘backFndata‘); 44 } 45 } 46 }) 47 48 } 49 }) 50 } 51 })(jQuery, window)

/*-------使用方法--------*/

1
/*绑定滚动事件*/ 2 $("#table").isScroll({ 3 container: "#table", 4 sections: ".list", 5 searchname: "全部", 6 url: "wwww", 7 page: 1, 8 pagenumber: 10, 9 backFn: function(data) { 10 console.log(data); 11 } 12 })

html代码

1 <ul id="table" class="table">
2    <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.回掉函数返回滚动加载后的数据,接收并进行处理。

js滚动加载小插件