minirefresh Elegant H5 Pull-to-Refresh

Add-ons

2026-07-26 00:51 6 次浏览 • 0 次下载 263.9KB

Plugin description: An elegant H5 pull-to-refresh solution. Zero dependencies, high performance, multiple themes, and easy extensibility.

Last updated: 2017/12/11 1:34:13 PM

Changelog:

Optimized internal code and removed unnecessary files.

Added an option to quickly hide the scrollbar.

minirefresh

Features

Zero dependencies (implemented with native JavaScript and does not rely on any libraries).
Multi-platform support. One codebase runs across multiple platforms, supporting Android, iOS, and mainstream browsers.
Rich themes. The official package provides multiple themes (including default, applet - mini-program style, drawer3d - 3D drawer effect, and taobao - Taobao-inspired style).
High performance. Animations use CSS3 and hardware acceleration for smooth performance on mainstream mobile devices.
Excellent compatibility. Supports nesting with various scrolling components (including mui-scroll, IScroll, Swipe, etc.) and works in Vue environments.
Easy to extend with a three-layer architecture that specifically separates the UI layer, making it easy to implement various themes. Creating a complete theme is very straightforward, and almost any visual effect can be achieved.
Elegant API and source code. The API is scientifically designed and simple to use, while the source code is carefully structured. All source code passes ESLint checks.
Comprehensive documentation and examples. Provides a complete showcase and detailed documentation.

Usage

Import

<link rel="stylesheet" href="xxx/minirefresh.css" />
<script type="text/javascript" src="xxx/minirefresh.js"></script>

Import using require

// Supports both NPM and file-based imports
var MiniRefreshTools = require('xxx/minirefresh.js');
require('xxx/minirefresh.css');

Import using import

// Use .js files in debug mode and .min.js files in the dist directory
import MiniRefreshTools from 'minirefresh';
import 'minirefresh/dist/debug/minirefresh.css'

Page layout

<!-- Do not modify classes starting with minirefresh -->
<div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">        
    </div>
</div>

Initialization

// After importing any theme, a global MiniRefresh variable will be available
var miniRefresh = new MiniRefresh({
    container: '#minirefresh',
    down: {
        callback: function() {
            // Pull-down event
        }
    },
    up: {
 
        callback: function() {
            // Pull-up event
        }
    }
});

Finish refreshing

// Finish pull-to-refresh
miniRefresh.endDownLoading();

// Finish infinite scrolling
// The parameter true indicates that there is no more data; otherwise, more data can continue to be loaded
miniRefresh.endUpLoading(true);