dropload的使用记录

这次做一个H5的页面，需要用到上拉加载，下拉刷新的功能，在网上看到ximen写的dropload.js可以满足需求（此处致谢作者），但是用的时候还是踩了一些坑，这里记录下来备忘。

一些小问题：
1. me.noData(); 和 me.noData(true);

表示当前无数据，也就是会在下方出现 （暂无数据）的表示
me.noData(false);则表示有数据，这时不会显示（暂无数据）

2. 如果不希望用户继续加载数据则需要锁定，这时候需要用 me.lock(); 如果需要开放则需要 me.unlock();

有个比较麻烦的点是 ：  你如果仅仅 me.unlock()了，其实你会发现无法下拉，为啥呢？ 因为 me.noData(), 这里需要告诉dropload有数据了，继续吧， 所以需要调用 me.noData(false)

1. 调用handler

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

var searchHelper = {         droploader: null,                   params: {             pageNo: 1,             pageSize: 10         },                   init: function() {             var me = searchHelper;                           me.droploader = $('.free-list').dropload({                 scrollArea : window,                 loadUpFn: function(wo) {                     me.refreshFunc(wo);                 },                 loadDownFn: function(wo) {                     me.loadFunc(wo);                 }             });         },                   refreshFunc: function(droploader) {             var me = searchHelper;                           me.params.pageNo = 1;             $.ajax({                 type: 'POST',                 url: '/search/test',                 dataType: 'json',                 data: me.params,                 success: function(result) {                     //重置                     droploader.resetload();                                           if(result.statusCode == 0 && result.data && result.data.length > 0) {                         me.resetRenderFunc();                         me.renderFunc(result.data);                         //有数据                         droploader.noData(false);                         me.params.pageNo++;                     } else {                         //无数据                         droploader.noData();                     }                     //重置                     droploader.unlock();                 },                 error: function(xhr, type) {                     console.log('加载数据错误-' + type);                     droploader.resetload();                 }             });         },                   loadFunc: function(droploader) {             var me = searchHelper;                           $.ajax({                 type: 'POST',                 url: '/search/test',                 dataType: 'json',                 data: me.params,                 success: function(result) {                     if(result.statusCode == 0 && result.data && result.data.length > 0) {                         me.renderFunc(result.data);                     } else {                         //锁定                         droploader.lock();                         //无数据                         droploader.noData();                     }                     //重置                     droploader.resetload();                     me.params.pageNo++;                 },                 error: function(xhr, type) {                     console.log('加载数据错误-' + type);                     droploader.resetload();                 }             });         },                   renderFunc: function(data) {             var info = '';             $.each(data, function(index, entity) {               info += '<li>' + entity + '</li>';             });             $('.free-list ul').append(info);         },                   resetRenderFunc: function() {             $('.free-list ul').empty();         } };

2. [代码]外部重新加载数据的方式

?

1 2 3 4 5 6 7 8

$('#btn').click(function() {         $('.free-list ul').empty();         searchHelper.params.pageNo = 1;         // 解锁         searchHelper.droploader.unlock();         searchHelper.droploader.noData(false);         searchHelper.droploader.resetload();     });

转自：simananzhui