Google Material Design 滑动（拉）刷新： Material Refresh
jopen
9年前
Google Material Design 滑动（拉）刷新控件。
高性能
只支持移动
它使用CSS3+JavaScript开发，依赖于Zepto 和 jQuery。
Types and preview
Type1:Above surface(default)
Type2:Below surface
Type3:Button action
示例
在线示例
快速入门
安装它
Includematerial-refresh.min.jsandmaterial-refresh.min.cssin your target html file.
<link rel='stylesheet' href='material-refresh.min.css'/> <script src='material-refresh.min.js'></script>
Cause it is a plugin forZeptoorjQuery, so we also need to includeZeptoorjQuery:
<script src='zepto.js'></script> <!-- or include jQuery.js--> <script src='jQuery.js'></script>
Usually, we will combine and compress all the css or js, depend on your needs.
You can also install it via Bower or npm:
bower install --save material-refresh
npm install --save material-refresh
基本用法
Example forType1: Above surface (default):
1.Instantiation:
mRefresh();
2.Finish the refresh and hide it:
mRefresh.resolve();
If you don't use this method, refesher will stop after the maxTime(Default: 6000ms).
Relations of three types
- Type1andType2can not use in the same time.
- Type3is depend onType1orType2, cause it will determine the refresher position
- Type3and (Type1orType2) can use in the same time.