干货分享,灵感创作,不定期更新,敬请期待。

dropload.js 再封装

前端 xhq 11612℃ 0评论

dropload再封装
版本:0.7.0
滚动有两种模式(scrollArea):
1.window
2.element(节点元素)

1.当scrollArea 为 window时默认为overflow:scroll
2.但当scrollArea 为其他节点时如.inners需设置.inners的属性overflow:scroll,并设定相对的高度
3.加载每一页(除最后一页)的样式要大于滚屏(scrollArea)的高度
4.初始化,下拉,上拉后都要进行dropload.resetload(),否则无法滚动等等

优点:
使用简单,代码简洁
不足:
简单封装,不能应用于所有场景

使用示例
避坑指南

用法示例:

 

 
<script type="text/javascript">
$(function(){
 var p = 1;
 // cate = <?php echo $cate[0]['id']; ?>;
 cate = <?php echo $cate1; ?>;
 var dropload = $('.inners').dropload({
 // am-list-news-bd overflow-y:scroll
 // scrollArea : window,
 //初始化
 initFn: function (me) {
 // console.log('initFn');
 var limit = 8;
 $.ajax({
 url:"{:U('Msquare/Index1/ajax_get_list')}",
 dataType:"JSON",
 type:"POST",
 data:{p:p++,limit:limit,cate:cate,temp:2},
 success:function(res){
 $('div.container').append(res.data);
 // run(append,res.data,show_imgs);

 if(res.msg>=limit){
 }else{
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 }
 dropload.resetload();
 show_time();
 get_posts_comment();
 
 }
 })
 },
 //下拉加载
 loadUpFn: function (me) {
 // console.log('loadUpFn');
 dropload.resetload();
 var limit = 8;
 $.ajax({
 url:"{:U('Msquare/Index1/ajax_get_list')}",
 dataType:"JSON",
 type:"POST",
 data:{limit:limit,cate:cate,temp:2},
 success:function(res){
 $('div.container').html(res.data);
 if(res.msg>=limit){
 me.unlock();
 me.resetload();
 }else{
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 }
 dropload.resetload();
 show_time();
 get_posts_comment();
 p = 1;//重置页码
 }
 })
 },
 //上拉加载
 loadDownFn: function (me) {
 // console.log('dddd=======================================',me.opts.scrollArea);
 // console.log('loadDownFn');
 var limit = 8;
 $.ajax({
 url:"{:U('Msquare/Index1/ajax_get_list')}",
 dataType:"JSON",
 type:"POST",
 data:{p:p++,limit:limit,cate:cate,temp:2},
 success:function(res){
 $('div.container').append(res.data);
 if(res.msg>=limit){
 }else{
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 }
 dropload.resetload();
 show_time();
 get_posts_comment();
 }
 })
 }
 });
})
</script>

 

注意:1. .inners的css属性

但是如果用的页面多了能不能再封装让使用更简洁呢?来个封装示例

 

 function loadd(options){
 options = options || {};
 p = 1;
 var defaults = {
 inners:'.inners'
 ,url:''
 // ,limit:8
 ,data:{p:p,limit:8}
 ,ul:'ul.item'
 ,window:1
 ,after:function(){}
 }
 for(var k in options){
 defaults[k] = options[k];
 }
 var dropload = $(defaults.inners).dropload({
 // am-list-news-bd overflow-y:scroll
 scrollArea : defaults.window === 1?window:$(defaults.inners),
 initFn: function (me) {
 console.log('initFn');
 // var limit = defaults.limit;
 $.ajax({
 url:defaults.url,
 dataType:"JSON",
 type:"POST",
 data:defaults.data,
 success:function(res){
 $(defaults.ul).append(res.data);
 defaults.data.p++;
 if(res.msg>=defaults.data.limit){
 console.log('---------ok----:');
 }else{
 console.log('over',defaults.data);
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 }
 dropload.resetload();
 defaults.after(res);
 }
 })
 },
 loadUpFn: '',
 loadDownFn: function (me) {
 console.log('loadDownFn');
 // var limit = 8;
 $.ajax({
 url:defaults.url,
 dataType:"JSON",
 type:"POST",
 data:defaults.data,
 success:function(res){
 $(defaults.ul).append(res.data);
 defaults.data.p++;
 if(res.msg>=defaults.data.limit){
 console.log('---------ok----:');
 }else{
 console.log('over',defaults.data);
 // 锁定
 me.lock();
 // 无数据
 me.noData();
 }
 dropload.resetload();
 defaults.after(res);
 }
 })
 }
 });
 }
使用示例:
loadd({window:0,url:"{:U('Msquare/AnnounceComment/get_comments_lists')}",ul:'#comment-containers ul',inners:'.am-article',data:{p:1,post_id:id,limit:8},after:function(res){
 // console.log('ress',res);
 format();
 }});

如果点击跳转到其他页面返回不初始化页面怎么破?示例代码如下(微信移动端测试)

<script type="text/javascript">

$(function(){
var p = typeof sessionStorage.msg_page != 'undefined'?sessionStorage.msg_page : 0;
sessionStorage.removeItem('msg_page');
var limit = 20;
companyCd = typeof sessionStorage.code != 'undefined'?sessionStorage.code : '';
sessionStorage.removeItem('code');
dropload = $('.am-list-news-bd').dropload({
// am-list-news-bd overflow-y:scroll
scrollArea : window,
initFn: function (me) {
console.log('initFn');
// var limit = 8;

if(sessionStorage.msg_pdf){
byId('events-list').innerHTML = sessionStorage.msg_pdf;
setTimeout(function(){
// document.body.scrollTop = sessionStorage.msg_top;
sessionStorage.removeItem('msg_pdf');
sessionStorage.removeItem('msg_top');
},1000)
//解决无法滚动
setTimeout(function(){
dropload.resetload();
},0)
}else{
$.ajax({
type : 'get',
url:'{:U('Show/Show/api_msg')}',
data : {
disclosureType : '',
page : p,
companyCd : companyCd,
isNewThree : '',
startTime : '',
endTime : '',
keyword : '',
sortType:'desc',
sortField:'bean.send_date'
},
dataType : 'jsonp',
success:function(res){
// $('ul.am-list').append(res);

rander(res);
if(true === res[0].listInfo.lastPage){
// 锁定
me.lock();
// 无数据
me.noData();
}
dropload.resetload();
p++;
}
})
}
},
loadUpFn: function (me) {
console.log('loadUpFn');
dropload.resetload();
},
loadDownFn: function (me) {
console.log('loadDownFn');
// var limit = 8;
$.ajax({
type : 'get',
url:'{:U('Show/Show/api_msg')}',
data : {
disclosureType : '',
page : p,
companyCd : companyCd,
isNewThree : '',
startTime : '',
endTime : '',
keyword : '',
sortType:'desc',
sortField:'bean.send_date'
},
dataType : 'jsonp',
success:function(res){
// $('ul.am-list').append(res);
rander(res);
if(true === res[0].listInfo.lastPage){
// 锁定
me.lock();
// 无数据
me.noData();
}
dropload.resetload();
p++;
}
})
}
});
})
</script>

最后完整的js文件:
http://pan.baidu.com/s/1skDmkC9

转载请注明:爱游思 » dropload.js 再封装

喜欢 (6)

您必须 登录 才能发表评论!