minirefresh优雅的H5 下拉刷新

所属分类:UI,输入-加载,拖和放,滚动

 2210  51  查看评论 (9)
minirefresh优雅的H5 下拉刷新 ie兼容10

更新时间:2017/12/11 下午1:34:13

更新说明:

优化内部代码,去除无用文件

增加快捷去除滚动条的配置项


minirefresh

特点

  • 零依赖(原生JS实现,不依赖于任何库)

  • 多平台支持。一套代码,多端运行,支持Android,iOS,主流浏览器

  • 丰富的主题,官方提供多种主题(包括默认,applet-仿小程序,drawer3d-3d抽屉效果,taobao-仿淘宝等)

  • 高性能。动画采用css3+硬件加速,在主流手机上流畅运行

  • 良好的兼容性。支持和各种Scroll的嵌套(包括mui-scroll,IScroll,Swipe等),支持Vue环境下的使用

  • 易拓展,三层架构,专门抽取UI层面,方便实现各种的主题,实现一套主题非常方便,而且几乎可以实现任何的效果

  • 优雅的API和源码,API设计科学,简单,源码严谨,所有源码通过ESlint检测

  • 完善的文档与示例,提供完善的showcase,以及文档

使用方法

引入

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

require引入

// 同时支持NPM与文件形式引入
var MiniRefreshTools = require('xxx/minirefresh.js');
require('xxx/minirefresh.css');

import引入

// debug下是.js dist下是.min.js
import MiniRefreshTools from 'minirefresh';
import 'minirefresh/dist/debug/minirefresh.css'

页面布局

<!-- minirefresh开头的class请勿修改 -->
<div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">        
    </div>
</div>

初始化

// 引入任何一个主题后,都会有一个 MiniRefresh 全局变量
var miniRefresh = new MiniRefresh({
    container: '#minirefresh',
    down: {
        callback: function() {
            // 下拉事件
        }
    },
    up: {

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

结束刷新

// 结束下拉刷新
miniRefresh.endDownLoading();
// 结束上拉加载
// 参数为true代表没有更多数据,否则接下来可以继续加载
miniRefresh.endUpLoading(true);
相关插件-加载,拖和放,滚动

精美进度条

色彩绚丽的进度条,代码简单,动画感强
  加载
 14788  78

jquery.Loading

8种fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器!
  加载
 19254  123

jQuery会员等级进度条(原创)

jQuery多节点点亮会员等级进度条
  加载
 2922  35

创造性的负载效应

13种页面加载特效
  加载
 3621  37

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    ?? 0
    2018/1/9 15:49:28

    不行啊

    大家教教我

        dailc0
        2018/1/12 10:51:22

        https://github.com/minirefresh/minirefresh

        可以看看官网,有文档说明。

    回复
    思想纠结者 0
    2017/12/25 10:33:43

    666很不错,支持!

    回复
    爱死寂寞人 0
    2017/12/14 14:56:06

    不错不错,现在用的是layui的flow加载,以后可以试试你这个

    回复
    总督sir 0
    2017/12/12 16:36:46
    ╊来自秋天的彤话の 0
    2017/12/12 13:24:52

    非常强啊, 正好要使用 。 

    回复
    heyushuo 0
    2017/12/11 10:37:25

    忒强大了,好流畅啊,这比iscroll还流畅,比iscroll简单多了。简单易用,支持作者

    回复
    WckY 0
    2017/12/11 10:27:29
    很棒 实机一经测试 我个人感觉比iscroll等其他的好用多了 也很流畅 以后就用它了 回复
    张大臀 0
    2017/12/11 9:04:12

    看起来效果挺好的  收藏了

    回复
取消回复