移动端翻页插件dropload.js（支持Zepto和jQuery）

dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。 但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面） 一、解决方案 改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。 例如：搜索一个服务端不存在的名字。 所以，添加接口设置setHasData。  MyDropLoad.prototype.setHasData = function(ishasData) { var me = this; if (ishasData) { dropload.js是一款适用于移动端的翻页插件，它支持Zepto和jQuery库，提供基本的上拉翻页和下拉刷新功能。这种插件在处理服务端一次返回所有数据的场景下非常适用，但实际应用中，我们经常需要实现更复杂的功能，如服务端分页、搜索、排序和多条件筛选。 针对这些需求，我们可以进行以下改进： 1. **添加setHasData接口**： 当涉及到分页、搜索或筛选时，可能会出现进入页面即无数据的情况，比如搜索一个服务器不存在的关键词。为了解决这个问题，dropload.js添加了`setHasData`方法。此方法允许开发者设置当前是否还有更多的数据可加载。如果设置为`false`，则表示无更多数据，插件会显示“无数据”提示；如果设置为`true`，则表示还有数据可加载，显示刷新加载的提示。这可以确保在没有数据时避免用户无意义地尝试上拉加载。 ```javascript MyDropLoad.prototype.setHasData = function(ishasData) { var me = this; if (ishasData) { me.isData = true; me.$domDown.html(me.opts.domDown.domRefresh); fnRecoverContentHeight(me); } else { me.isData = false; me.$domDown.html(me.opts.domDown.domNoData); fnRecoverContentHeight(me); } }; ``` 2. **修复上拉加载与筛选条件改变的问题**： 当用户选择不同的筛选条件时，上拉加载可能无法正常工作，因为数据量的变化可能影响了加载距离的计算。为解决这个问题，我们需要在每次请求API后，无论成功或失败，都执行`resetload`方法，以确保加载状态的正确重置。同时，更新`resetload`方法，加入计算屏幕尺寸的步骤。 ```javascript MyDropLoad.prototype.resetload = function() { var me = this; // ... (resetload的具体实现) }; ``` 3. **处理setHasData(false)后的状态**： 如果在某个筛选条件下，上拉加载后发现无更多数据，然后切换筛选条件，用户可能会发现无法再次上拉加载。这是因为`setHasData(false)`后，插件进入了无数据状态，而切换条件后没有恢复。因此，每次改变搜索条件、筛选条件或排序时，都应调用`setHasData(true)`来重置加载状态。 **调用和使用方法**： 在实际应用中，我们需要找到要进行上拉加载的元素，并为其添加调用dropload.js的方法。注意保存返回的对象，并定义上拉加载后的回调函数`LoadDownFn`，在这个函数里处理API请求、数据加载和页面更新。无论API请求结果如何，都要调用`resetload`方法来保持加载状态的正确性。具体代码可能如下所示： ```javascript self.moreFund = $('#table-fundlist').dropload({ scrollArea: window, domDown: { domClass: 'dropload-down', domRefresh: '<div class="dropload-refresh"><img class="..."/>...</div>' }, LoadDownFn: function(me) { fetchData(offset, function(data, error) { if (error) { me.resetload(); } else { // 动态加载新数据到页面 loadNewDataToPage(data); me.resetload(); } }); } }); ``` 在这段代码中，`fetchData`是发送API请求的函数，`offset`是当前请求的偏移量，`LoadDownFn`的回调处理API返回的数据并更新页面。 dropload.js通过提供灵活的接口和适应性较强的解决方案，能够帮助开发者构建出支持多种高级功能的移动端列表页面，包括分页、搜索、排序和筛选等。在使用过程中，理解并正确应用这些改进和调用方法，能确保插件在复杂场景下的稳定表现。