minirefresh.js移动端下拉刷新插件配置教程

       minirefresh.js是一款不依赖于任何库，支持Android，iOS，主流浏览器,有丰富的主题（包括默认，仿小程序， taobao-仿淘宝等）的下拉刷新插件，可在主流手机上流畅运行。

引入CSS和JS文件

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

 
<div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">
     你要拉动的区域
    </div>
</div>

初始化代码

var miniRefresh = new MiniRefresh({
    container: '#minirefresh',
    isLockX:true , //拉动时间 动画效果跟随下拉
    isScrollBar:false, //是否显示滚动条
    down: {
        callback: function() {           
             // 下拉完你要执行的代码

            miniRefresh.endDownLoading();
        },
        offset:100 ,//触发下拉的阈值，当下拉距离大于这个阈值后，在松开时会触发下拉刷新
        onPull:function()
        {
           //下拉过程中一直执行的代码
        }
    },
    up: {

        callback: function() {            // 上拉事件

            // 注意，由于默认情况是开启满屏自动加载的，所以请求失败时，请务必endUpLoading(true)，防止无限请求
            miniRefresh.endUpLoading(true);
        }
    }
});

运行效果

 防淘宝效果