minirefresh优雅的H5 下拉刷新

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

 29760  380  查看评论 (16)
分享到微信朋友圈
X
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);
相关插件-加载,拖和放,滚动

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 34148  329

jQuery动画进度条 实时显示进度百分比DEMO演示

jQuery动画进度条 实时显示进度百分比DEMO演示
  加载
 43485  344

jquery图片加载进度

图片异步加载进度表条
  加载
 54210  386

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 52878  377

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    0
    2019/7/31 15:18:43
    不知道为什么我的下拉到底了一直没触发回调 回复
    Peter@小飞侠 0
    2018/10/22 11:27:48
    onecontainer_multilist有bug,切换几次之后,就不能上滑加载了 回复
    几分中意 0
    2018/5/9 11:36:19
    作者,我想反馈一个bug qq2788161806 回复
    几分中意 0
    2018/5/9 10:46:19
    为啥就一条数据还一直加载。数据
        帷幕0
        2018/10/16 14:28:42
        你好 请问怎么解决的, 我也是一条一条的加载
    回复
    几分中意 0
    2018/5/8 11:56:04
    几分中意 0
    2018/5/8 11:51:21
    为什么一次性把我的ajax里面的数据都加载出来了? 回复
    ?? 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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复