minirefresh优雅的H5 下拉刷新

插件特效

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

插件描述：优雅的H5 下拉刷新。零依赖，高性能，多主题，易拓展。

更新时间：2017/12/11 下午1:34:13

更新说明：

优化内部代码，去除无用文件

增加快捷去除滚动条的配置项

minirefresh

特点

零依赖（原生JS实现，不依赖于任何库）
多平台支持。一套代码，多端运行，支持Android，iOS，主流浏览器
丰富的主题，官方提供多种主题（包括默认，applet-仿小程序，drawer3d-3d抽屉效果，taobao-仿淘宝等）
高性能。动画采用css3+硬件加速，在主流手机上流畅运行
良好的兼容性。支持和各种Scroll的嵌套（包括mui-scroll,IScroll,Swipe等），支持Vue环境下的使用
易拓展，三层架构，专门抽取UI层面，方便实现各种的主题，实现一套主题非常方便，而且几乎可以实现任何的效果
优雅的API和源码，API设计科学，简单，源码严谨，所有源码通过ESlint检测
完善的文档与示例，提供完善的showcase，以及文档

使用方法

引入

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

require引入

// 同时支持NPM与文件形式引入
var MiniRefreshTools = require('xxx/minirefresh.js');
require('xxx/minirefresh.css');

import引入

// debug下是.js dist下是.min.js
import MiniRefreshTools from 'minirefresh';
import 'minirefresh/dist/debug/minirefresh.css'

页面布局

<!-- minirefresh开头的class请勿修改 -->
<div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">        
    </div>
</div>

初始化

// 引入任何一个主题后，都会有一个 MiniRefresh 全局变量
var miniRefresh = new MiniRefresh({
    container: '#minirefresh',
    down: {
        callback: function() {
            // 下拉事件
        }
    },
    up: {
 
        callback: function() {
            // 上拉事件
        }
    }
});

结束刷新

// 结束下拉刷新
miniRefresh.endDownLoading();

// 结束上拉加载
// 参数为true代表没有更多数据，否则接下来可以继续加载
miniRefresh.endUpLoading(true);