基于IScroll的全套下拉刷新皮肤 – pullToRefresh-h5-iscroll

H5下拉刷新皮肤系列

基于IScroll的全套下拉刷新皮肤。各式各样的皮肤。以及下拉刷新实现基类供自定义UI实现。

Effect(效果)

  • 效果1

  • 效果2

  • 效果3

  • 效果4

  • 效果5

  • 效果6

How To Use(使用)

  • Require(引入脚本)

    <script type="text/javascript" src="../../../dist/Tools.PullToRefresh.IScroll.Probe.js" ></script>
     <script type="text/javascript" src="../../../dist/Tools.PullToRefresh.Skin.Default.js"></script>

    可以将Skin.Default替换为对应的皮肤

  • HTML Structure(页面结构)

    <div class="×××-scroll-wrapper">
         <div class="×××-scroll">
             ...
         </div>
     </div>

    譬如,如果基于mui的,就可以是mui-scroller-wrapper,其它的自己定义对应scroll样式即可

  • JS Initialization(JS初始化)

    var pullToRefreshObj = PullToRefreshSkinDefault.initPullToRefresh({
         //这里用默认设置
         element: '#pullrefresh',
         //down为null表示不要下拉刷新    
         down: {
             callback: pullDownRefreshCallback,
             //是否显示成功动画
             isSuccessTips: true,
         },
         //up为null为不要上拉
         //上拉有关
         up: {
             //是否自动上拉加载-初始化是是否自动
             auto: true,
     
             callback: pullUpRefreshCallback
         },
         scroll: {
             bounceTime: 500,
             //回弹动画时间
             //下拉刷新和上拉加载成功动画的时间
             successAnimationTime: 500
         },
     });

    具体可以将PullToRefreshSkinDefault换为具体皮肤,其它更多操作参考示例

  • API(暴露出来的方法)

    * finished //这是一个属性,用来控制当前上拉加载是否可用
     * refresh() //重置状态。譬如上拉加载关闭后需要手动refresh重置finished状态
     * pulldownLoading() //主动触发一个下拉刷新的动画(同时会触发下拉回调)
     * pullupLoading() //主动触发一个上拉加载的动画(同时会触发上拉回调)
     * endPullDownToRefresh() //关闭下拉刷新动画,重置状态
     * endPullUpToRefresh(finished) //关闭上拉加载动画,重置状态,如果finished,则不允许在上拉,除非再次refresh()

    关于更多的使用说明(如自定义UI类的实现,请参考最后的更多说明)

  • (Notice)注意

    • 如果使用了非mui外的皮肤,需要引入样式文件PullToRefresh-Skin.css
    • 另外,也支持require方式引入,不过webpack打包出来的dist中,就算require引入了,也请通过全局变量方式来使用,如PullToRefreshSkinDefault
  • (Global Variable)相应的全局变量与JS文件

    IScroll //PullToRefresh-IScroll-Probe.js
     PullToRefreshCore //PullToRefresh-Core.js
     PullToRefreshSkinDefault //PullToRefresh-Skin-Default.js
     PullToRefreshSkinType1 //PullToRefresh-Skin-Type1.js
     PullToRefreshSkinType2 //PullToRefresh-Skin-Type2.js
     PullToRefreshSkinType3 //PullToRefresh-Skin-Type3.js
     PullToRefreshSkinType4 //PullToRefresh-Skin-Type4.js
     PullToRefreshSkinMuiDefault //PullToRefresh-Skin-Mui-Default.js
     PullToRefreshSkinMuiType1 //PullToRefresh-Skin-Mui-Type1.js
     PullToRefreshSkinMuiType2 //PullToRefresh-Skin-Mui-Type2.js
     PullToRefreshSkinMuiType3 //PullToRefresh-Skin-Mui-Type3.js
     PullToRefreshSkinNative	//PullToRefresh-Skin-Native.js
     PullToRefreshTools	//PullToRefresh-Bizlogic-Impl.js

关于

除了基于mui的默认皮肤外,其它皮肤都是基于IScroll5的,所以打包出来后文件都要大很多(不过可以脱离mui使用)。

另外需要注意的是,其中基于mui.js的几个皮肤,里面的mui.js是改造过的(因为原版的mui不支持严格模式,babel编译报错的),实际使用中可以换为自己的mui.js

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:基于IScroll的全套下拉刷新皮肤 – pullToRefresh-h5-iscroll