優雅的H5下拉刷新【minirefresh】

序

嚴格的來講，這是我第一個徹底投入的開源項目，它的出現是爲了統一移動H5中的下拉刷新，想經過一套框架，多主題拓展方式，適應於任意需求下的任意下拉刷新場景。

另外，這個項目做爲獨立項目存在，但願能有更多的人蔘與進來！

【minirefresh】優雅的H5下拉刷新。零依賴，高性能，多主題，易拓展。

特色

• 零依賴（原生JS實現，不依賴於任何庫）
• 多平臺支持。一套代碼，多端運行，支持Android，iOS，主流瀏覽器
• 豐富的主題，官方提供多種主題（包括默認，applet-仿小程序，drawer3d-3d抽屜效果，taobao-仿淘寶等）
• 高性能。動畫採用css3+硬件加速，在主流手機上流暢運行
• 良好的兼容性。支持和各類Scroll的嵌套（包括mui-scroll,IScroll,Swipe等），支持Vue環境下的使用
• 易拓展，三層架構，專門抽取UI層面，方便實現各類的主題，實現一套主題很是方便，並且幾乎能夠實現任何的效果
• 優雅的API和源碼，API設計科學，簡單，源碼嚴謹，全部源碼經過ESlint檢測
• 完善的文檔與示例，提供完善的showcase，以及文檔

源碼

https://github.com/minirefresh/minirefresh

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

官網與文檔

http://www.minirefresh.com

https://minirefresh.github.io/

效果

基礎示例

1. 【基礎新聞列表】最基本的下拉刷新使用

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的方式提交！

更多參考：https://minirefresh.github.io/minirefresh-doc/site/contribute/howtocontributor.html

討論

• 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