1.0.2 • Published 6 years ago
pull2refresh v1.0.2
Pull2Refresh (Pull To Refresh)
A pull to refresh library without any dependency.
Screenshot
Example available here.
Installation
npm install --save pull2refresh
Usage
<div class="content">
<div class="pulltorefresh" style="display: none">
<i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
</div>
<h1>Pull down to refresh</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script type="text/javascript" src="pull2refresh.js"></script>
<script>
var p2r = new pull2refresh({
// Pullable content
pullableElement: document.querySelector(".content"),
// Block that will appear when pulling
refreshElement: document.querySelector(".pulltorefresh"),
// Refresh callback
onRefresh: function() {
console.log("refresh !");
p2r.done();
},
// Pull callback
onPull: function(ratio) {
console.log("pull percentage: " + (ratio * 100));
}
});
</script>
API
Constructor
var p2r = new pull2refresh({
pullableElement, // Required. HTMLElement that can be pulled.
refreshElement: HTMLElement; // Required. HTLMElement that will appear during pull.
onRefresh: () => void; // Required. Callback that will be called at the end of the pull.
onPull?: (percentage: number) => void; // Optionnal. Callback called during pull. A number between 0 and 1, representing the progression of the pull, is passed as argument of the callback.
threshold?: number; // Optionnal. Threshold in pixel to reach to consider the pull finished. By default this threshold is the height of the refreshElement.
});
done()
p2r.done();
Function to call to indicate the refresh is done.
After calling this function, the refreshElement
will be hidden and a new pull to refresh action can be done.
Build
# Build js library and type.d.ts file
npm run build
# Build minified js library and type.d.ts file
npm run build:min
Licence
pull2refresh is released under the MIT license.