IT小书童

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

运行效果



 防淘宝效果