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

Minirefresh接口大全

Minirefresh初始化options配置

    通过之前的例子我们知道minirefresh.js的初始化对象方法是new MiniRefresh(options)来实现,那么options的设置如下表。

参数类型默认值说明
downObjectd对象对象向下拉时的配置 down:{callback: function() {}}
upObjectd对象对象向上拉时的配置 down:{callback: function() {}}
containerString字符串'#minirefreshminirefresh容器的对象div ID
isLockXBoolean类型truetrue锁定横向滑动,则原生滚动条无法滑动。
isUseBodyScrollBoolean类型falsetrue使用网页body的scroll而不是minirefresh对象的scroll,如果使用body的scroll,可以通过window.onscroll监听,但是只能由一个下拉刷新容器,否则会有冲突。如果是新手可以忽略。
isScrollBarBoolean类型false是否显示滚动条,为false时会将滚动条宽度设为0,true时则显示滚动条

对上面的api设置举例说明:

  var options={
            container: '#mrefresh', //这里是插件的容器ID
            down: {
                isAuto: true,
                successAnim: { isEnable: true },
                callback: function () {
                    // 下拉后的回调事件 
                    getData();
                    mRefresh.endDownLoading();
                }
                
            }
            ,
            up: { 
                callback: function () {
                    // 向上拉后的回调事件 
                    mRefresh.endUpLoading(true);
                }
            }
        }
  var mRefresh = new MiniRefresh(options);

向下拉down的配置

参数
级别(1-3级)类型默认值说明
isLock3不常用Booleanfalsetrue锁定下拉刷新,无法下拉,特点场景下使用。
isAuto1常用Booleanfalsetrue自动执行一次下拉刷新,下拉优先级要高于上拉加载的auto,两个auto只会执行一次。如订单、个人中心需要实时的页面,有必要用到。
isAways3不常用Booleanfalsetrue在上拉时也可以下拉,如果为false,上拉时无法触发下拉刷新

isAllowAutoLoading
2不常用Booleantruetrue时生效,是否在初始化的下拉刷新触发事件中显示动画。false,初始化的加载只会触发回调,不会触发动画
isAutoResetUpLoading3级Booleantrue是否每次下拉完毕后默认重置上拉,为false时下拉刷新后不会自动重置上拉状态
isScrollCssTranslate3级Booleantrue定制自定义下拉刷新
offset1级Number75触发下拉的阈值,当下拉距离大于这个阈值后,在松开时会触发下拉刷新,重要比如你自己的网页顶部有给固定的toolbar则需要用到这个配置
dampRateBegin3级 Number1阻尼系数,下拉小于offset时的阻尼系数,值越接近0,高度变化越小,表现为越往下越难拉,默认值就行
dampRate3级 Number0.3下拉超过阈值后的阻尼系数,越接近0,下拉高度变化越小,例如0.1时表现是超过阈值后基本就拉不动了
bounceTime3Number300下拉取消后或结束后到关闭时,会有一个回弹动画的时长,级 默认值就行
successAnim3级 Object默认成功动画配置相关,请只在实现了成功动画的主题中使用,比如default主题,目前成功动画只是保留功能,因为以后可能有主题需要它
successAnim.isEnable3级 Object默认是否开启成功动画,开启后,下拉结束之前会先出现成功动画
successAnim.duration3级 Number300成功动画的过度时间
onPull1级 回调函数null下拉过程中的持续回调这个方法,参数(downHight, downOffset)
onCalcel1级 回调函数null下拉中途持续后执行的回调行数,执行N次
callback1级  重要1级 null用户下拉后执行的方法,执行一次

上面配置举例说明

var options={
            container: '#mrefresh', //这里是插件的容器ID
            down: {
                isLock:false,
                isAuto: true,
                isAways:false,
                isAllowAutoLoading:true,
                isAutoResetUpLoading:true,
                isScrollCssTranslate:true,
                offset:75,
                dampRateBegin:1,
                dampRate:0.3,
                bounceTime:300, 
                successAnim: { isEnable: true,duration:300 },
                onPull:function(downHight, downOffset)
                {
                  //下拉时这里会一直执行
                },
                onCalcel:function()
                {
                  //下拉中途放弃刷新
                }
                callback: function () {
                   //重要下拉后的回调事件 ,去后台获取新的数据
                   mRefresh.endDownLoading();
                }
                
            }
             
        }
  var mRefresh = new MiniRefresh(options);

上拉刷新配置

参数级别类型默认值说明
isAuto3Booleantrue执行1次上拉回调事件(会同时有动画和回调),当下拉的isAuto生效时,这个设置无效
isLock3Booleanfalse等于true无法上拉
offset1Number75当向上拉动到值时,会触发上拉加载
isShowUpLoading2Booleantrue是否显示动画
loadFull2Object默认当屏幕未满屏时,是否自动加载到满屏
loadFull.isEnable2Booleantruetrue当屏幕未满屏时,是否自动加载到满屏
loadFull.delay2Number300当未满屏时间,延迟多久自动加载数据
onScroll2Functionnull滚动时的持续执行的回调函数,参数(scrollTop)
callback1Functionnull上拉刷新完成及松开手后触发的回调函数

上面配置代码例子

var options={
            container: '#mrefresh', //这里是插件的容器ID
             
            up: { 
               isLock:false, //是否开启上拉功能
               isAuto:false,
               isShowUpLoading:true,//显示动画
               offset:75,//拉动多少距离就触发callback回调函数
               loadFull:{
                  isEnable:true,//自动加载满屏
                  delay:2000 //两秒后触发自动加载满屏
               },
               onScroll:function(scrollTop){
                   //向上拉动时这个函数一直会执行,scrollTop距离顶部的位置
               },
                callback: function () {
                    // 向上拉后的回调事件 
                    mRefresh.endUpLoading(true);
                }
            }
        }
  var mRefresh = new MiniRefresh(options);