序 嚴格的來說，這是我第一個完全投入的開源項目，它的出現是為了統一移動H5中的下拉刷新，想通過一套框架，多主題拓展方式，適應於任意需求下的任意下拉刷新場景。 另外，這個項目作為獨立項目存在，希望能有更多的人參與進來！ " " "【minirefresh】優雅的H5下拉刷新。零依賴，高性能，多主題，易 ...
序
嚴格的來說，這是我第一個完全投入的開源項目，它的出現是為了統一移動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
官網與文檔
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的方式提交！
貢獻被採納後會加入貢獻者名單，如果有傑出貢獻（如持續貢獻），可以加入Manager小組，共同開發維護MiniRefresh
有共同參與項目意願的，可以申請成為Member，成為Minirefresh真正的主人！
更多參考：https://minirefresh.github.io/minirefresh-doc/site/contribute/howtocontributor.html
討論
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組織上的，希望有更多的人能參與，成為組織的一員，共同維護，畢竟在不斷的分享交流中才能進步更快...
