MiniRefresh.js下拉刷新插件教程和帮助手册

技术特点

      1，该插件原生JS实现，不依赖于jquery、vue等任何库
      2，支持移动端Android，iOS，等主流浏览器。性能好，经测试在红米低配手机也流畅运行。
      3，官方提供多种主题（包括默认，applet、drawer3d-3d、taobao主题）。

使用方式

       NPM方式
       npm install minirefresh 

       网页引用JS文件方式
      <link href="https://www.itxst.com/package/minirefresh2/minirefresh.css" rel="stylesheet" />
      <script src="https://www.itxst.com/package/minirefresh2/minirefresh.js"></script>

页面布局

<div id="mrefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">
       <!-- 这里放你要被下拉的区域 -->

    </div>
</div>

初始化js代码

var mRefresh = new MiniRefresh({
    container: '#mrefresh', //这里是插件的容器ID
    down: {
        callback: function() {
            // 下拉后的回调事件 ，你可以在这里执行你的后台请求数据函数，达到刷新数据的作用
            
             mRefresh.endDownLoading();
        }
        ,
              onCalcel: function() {           
                     //下拉到一半，放弃刷新执行的事件
                 }
    }
       ,
    up: {
 
        callback: function() {
            // 向上拉后的回调事件
 
            mRefresh.endUpLoading(true);
        }
    }
});

在线试一试     下载文件