pagerefresh

pagerefresh

優雅的H5下拉重新整理。零依賴，高效能，多主題，易擴充。

Notice

喜歡，你就給一個star!

特點

零依賴（原生JS實現，不依賴於任何庫）

多平臺支援。一套程式碼，多端執行，支援Android，iOS，主流瀏覽器

豐富的主題，官方提供多種主題（包括預設，applet-仿小程式，drawer3d-3d抽屜效果，taobao-仿淘寶等）

高效能。動畫採用css3+硬體加速，在主流手機上流暢執行

良好的相容性。支援和各種Scroll的巢狀（包括mui-scroll,IScroll,Swipe等），支援Vue環境下的使用

易擴充，三層架構，專門抽取UI層面，方便實現各種的主題，實現一套主題非常方便，而且幾乎可以實現任何的效果

優雅的API和原始碼，API設計科學，簡單，原始碼嚴謹，所有原始碼通過ESlint檢測

完善的文件與示例，提供完善的showcase，以及文件

文件

https://ggwujun.github.io/page-refresh-com/

https://ggwujun.gitbooks.io/page-refresh/content/

安裝

NPM

npm install page-refresh--save-dev(一般推薦本地安裝)

https://www.npmjs.com/package/page-refresh

GIT

git clone git://https://github.com/GGwujun/page-refresh.git

https://github.com/GGwujun/page-refresh.git

引入

require引入

//同時支援NPM與檔案形式引入

varMiniRefreshTools=require('xxx/pagerefresh.js');

require('xxx/minirefresh.css');

import引入

//debug下是.js dist下是.min.js

importpagerefreshfrom'page-refresh';

import'page-refresh/dist/page-refresh.min.css'

頁面佈局

頁面佈局

初始化

初始化

結束重新整理

結束重新整理

效果

基礎示例

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】滑動抽屜效果主題

貢獻

pagerefresh需要你!

來為專案添磚加瓦，新的Idea，新的主題，重大Bug發現，新的設計資源（如圖示，官網設計等）

都可以通過Issue或PR的方式提交！

貢獻被採納後會加入貢獻者名單，如果有傑出貢獻（如持續貢獻），可以加入Manager小組，共同開發維護pagerefresh

有共同參與專案意願的，可以申請成為Member，成為pagerefresh真正的主人！

討論

QQ群（225192209）

微信公眾號（web前端開發大師兄）

web前端開發大師兄

注意，申請加入群時請新增驗證資訊，例如：pagerefresh使用遇到問題等等