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);
        }
    }
});

在线试一试     下载文件