mescroll Pull-to-Refresh and Infinite Scroll JavaScript Framework

Add-ons

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

mescroll Pull-to-Refresh and Infinite Scroll JavaScript Framework

Plugin description: mescroll is a polished JavaScript framework for pull-to-refresh and infinite scrolling. Built with native JavaScript, supports Vue, and does not depend on jQuery or Zepto. More lightweight and powerful than iScroll and dropload. One codebase runs across multiple platforms: works perfectly on Android, iOS, mobile browsers, and is compatible with mainstream PC browsers. Flexible parameter combinations for easy customization and extension. Includes examples from mainstream apps and a rich collection of classic use cases.

Usage

1. Download and include the files mescroll.min.css , mescroll.min.js

2. Copy the following layout structure:

<div id="mescroll" class="mescroll"> // The ID can be changed, but the "mescroll" class must not be removed
    // List content, for example: <ul>List data</ul> ...
</div>

3. Create a mescroll instance:

var mescroll = new MeScroll("mescroll", { // The first parameter "mescroll" corresponds to the ID of the div in the layout structure above
    // If your pull-to-refresh operation resets the list data, you do not need to configure down at all. Refer to the first basic example for detailed usage.
    // Explanation: down.callback calls mescroll.resetUpScroll() by default. resetUpScroll sets page.num=1 and then triggers up.callback.
    down: {
        callback: downCallback // Pull-to-refresh callback. Do not write it as downCallback(), because the extra parentheses will execute the method immediately.
    },
    up: {
        callback: upCallback // Infinite scroll callback
    }
}); 

4. Handle callbacks:

// Pull-to-refresh callback
function downCallback() {
    $.ajax({
        url: 'xxxxxx',
        success: function(data) {
            // Callback for successful network requests. Hide the pull-to-refresh status.
            mescroll.endSuccess(); // No parameters
            // Set data
            // setXxxx(data); // Implement this yourself TODO
        },
        error: function(data) {
            // Callback for failed network requests. Hide the pull-to-refresh status.
            mescroll.endErr();
        }
    });
}
 
// Infinite scroll callback. page = {num:1, size:10}; num: current page, starting from 1 by default; size: number of items per page, 10 by default.
function upCallback(page) {
    $.ajax({
        url: 'xxxxxx?num=' + page.num + "&size=" + page.size, // How to change page.num to start from 0?
        success: function(data) {
            // Callback for successful network requests. Hide both pull-to-refresh and infinite scroll statuses.
            // Parameter data.length: total number of items on the current page.
            // mescroll automatically checks data.length. If the list contains no data, it displays the empty state configured in empty.
            // If there is no data on the next page, it displays a "No more data" message (pay attention to the noMoreSize configuration).
            // If you need to force the "No more data" message to appear, call mescroll.endSuccess(0). Pay attention to the noMoreSize configuration.
            // If data.length is not passed, only the pull-to-refresh status will be hidden.
            mescroll.endSuccess(data.length);
            // Set list data
            // setListData(data); // Implement this yourself TODO
        },
        error: function(e) {
            // Callback for failed network requests. Hide both pull-to-refresh and infinite scroll statuses.
            mescroll.endErr();
        }
    });
}