Mobile Pull-Down Refresh and Pull-Up Load More Zepto/jQuery Plugin

Add-ons

2026-07-26 00:23 5 次浏览 • 0 次下载 0KB

Mobile Pull-Down Refresh and Pull-Up Load More Zepto/jQuery Plugin

Plugin Description: Mobile pull-down refresh and pull-up load more plugin

Dependencies

Zepto or jQuery version 1.7 or later. jQuery 2.x is recommended (do not include both libraries at the same time).

Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）

Usage

Include the CSS and JS files

(basic)

<link rel="stylesheet" href="../dist/dropload.css">
<script src="../dist/dropload.min.js"></script>

$('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // Must be reset after each data load is complete
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // Reset is required even if loading fails
                me.resetload();
            }
        });
    }
});

(Note: In all examples, ajax and setTimeout are only used to simulate loading effects and are not directly related to this plugin. It is recommended that you write your own ajax code. Unless there are special circumstances, you do not need to copy my ajax implementation, as it is poorly written. If you want to download and run it locally, install a server environment on your machine first; otherwise, ajax will report an error.)

Options

Parameters	Description	Default Value	Available Values
scrollArea	Scrolling Area	The bound element itself	window
domUp	Top DOM	{ domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓ Pull down to refresh</div>', domUpdate : '<div class="dropload-update">↑ Release to update</div>', domLoad : '<div class="dropload-load">○ Loading...</div>' }	Array
domDown	Bottom DOM	{ domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑ Pull up to load more</div>', domLoad : '<div class="dropload-load">○ Loading...</div>', domNoData : '<div class="dropload-noData">No more data</div>' }	Array
autoLoad	Automatic Loading	true	true or false
distance	Pull Distance	50	Number
threshold	Preload Distance	2/3 of the loading area height	Positive Integer
loadUpFn	Top Callback Function	Empty	function(me){ // Your code me.resetload(); }
loadDownFn	Bottom Callback Function	Empty	function(me){ // Your code me.resetload(); }

API

Exposes some functions to make dropload more flexible to use

lock() Lock dropload

Parameters	Description
lock()	Intelligently locks the direction of the previous load
lock('up')	Lock Top
lock('down')	Lock Bottom

unlock() Unlock dropload

noData() No data available

Parameters	Description
noData()	No data
noData(true)	No data
noData(false)	Data available

resetload() Reset. Must be called after each data load is complete

dropReload() Manually load

Known Issues

In some Android versions, the UC and QQ browsers display an address bar at the top. When the page is scrolled initially to hide the address bar, the scroll and resize events cannot be triggered, which may cause the plugin to malfunction in certain situations. Solution 1: Increase the distance value, for example, distance:50 in DEMO2. Solution 2: Add a meta tag to enable full-screen display

<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">