优雅的H5下拉刷新【minirefresh】

时间 2019-11-05

标签优雅 h5 下拉刷新 minirefresh 繁體版

原文原文链接

序

严格的来讲，这是我第一个彻底投入的开源项目，它的出现是为了统一移动H5中的下拉刷新，想经过一套框架，多主题拓展方式，适应于任意需求下的任意下拉刷新场景。javascript

另外，这个项目做为独立项目存在，但愿能有更多的人参与进来！css

【minirefresh】优雅的H5下拉刷新。零依赖，高性能，多主题，易拓展。html

特色

零依赖（原生JS实现，不依赖于任何库）
多平台支持。一套代码，多端运行，支持Android，iOS，主流浏览器
丰富的主题，官方提供多种主题（包括默认，applet-仿小程序，drawer3d-3d抽屉效果，taobao-仿淘宝等）
高性能。动画采用css3+硬件加速，在主流手机上流畅运行
良好的兼容性。支持和各类Scroll的嵌套（包括mui-scroll,IScroll,Swipe等），支持Vue环境下的使用
易拓展，三层架构，专门抽取UI层面，方便实现各类的主题，实现一套主题很是方便，并且几乎能够实现任何的效果
优雅的API和源码，API设计科学，简单，源码严谨，全部源码经过ESlint检测
完善的文档与示例，提供完善的showcase，以及文档

源码

https://github.com/minirefresh/minirefreshjava

https://www.npmjs.com/package/minirefreshcss3

官网与文档

http://www.minirefresh.comgit

https://minirefresh.github.io/github

效果

基础示例

1. 【基础新闻列表】最基本的下拉刷新使用npm

2. 【多列表单容器】每次切换菜单时刷新容器小程序

3. 【多列表多容器】多个列表都有一个Minirefresh对象微信小程序

4. 【Vue支持】支持Vue下的使用

嵌套示例

1. 【Mui-Slider】内部嵌套图片轮播

2. 【Mui-Scroll】嵌套在Mui-Scroll中

3. 【Swipe】嵌套在Swipe中

主题示例

1. 【applet】仿微信小程序主题

2. 【taobao】仿淘宝刷新主题

3. 【drawer3d】3D抽屉效果主题

4. 【drawer-slider】滑动抽屉效果主题

showcase

能够直接在线体验效果

https://minirefresh.github.io/minirefresh/examples/

快速开始

引入

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

或require

var MiniRefreshTools = require('xxx/minirefresh.js');

或import

import { MiniRefreshTools } from 'xxx/minirefresh.js';

页面布局

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

更多的使用请参考官方文档

贡献

minirefresh须要你!

来为项目添砖加瓦，新的Idea，新的主题，重大Bug发现，新的设计资源（如图标，官网设计等）

均可以经过Issue或PR的方式提交！

讨论

gitter
QQ群（601988892）

注意，申请加入群时请添加验证信息，例如：minirefresh使用遇到问题等等

最后关于灵感与参考

核心架构是参考的我本身之前的项目 https://github.com/dailc/pulltorefresh-h5-iscroll，只不过把依赖IScroll换成了原生JS与CSS3实现，而且彻底的重构与优化

作这个项目的灵感与原动力是受 https://github.com/mescroll/mescroll 启发，可是因为那个项目里的代码不符合个人我的风格，一些主题拓展也没有达到个人要求，所以我本身从新写了一个项目而不是基于mescroll拓展

还有就是写这个项目也是对本身的一种锻炼，里面包含了

JS与CSS3的熟练运用，并进行合理架构
ESlint严格的代码检测
Gulp 自动构建
Karma+Mocha单元测试（待完善）
Circleci，Codecov，Sauce等自动集成与测试网址，
Gitbook构建API与教程文档
Hexo构建官方网站（待完善）
域名备案，CDN加速等（待完善）
Npm发布与Github项目团队

固然了，迫于一些缘由，没有用全新的ES6或TS写，而是用的ES5严格模式。

另外，这个项目是托管在Github的minirefresh组织上的，但愿有更多的人能参与，成为组织的一员，共同维护，毕竟在不断的分享交流中才能进步更快...

附录

博客

初次发布2016.09.02于我我的博客上面

http://www.dailichun.com/2017/09/02/minirefresh.html