swipe-to-refresh
A WebComponent to pull the window down and refresh
Install
$ npm install swipe-to-refresh
Syntax
<html lang="en">
<head>
<script src="swipe-refresh.js"></script>
<script>
function doRefresh() {
console.log("Refresh!!");
}
function init() {
document.querySelector("swipe-refresh").refresh = doRefresh;
}
</script>
</head>
<body onload="init()">
<swipe-refresh></swipe-refresh>
<div style="width: 100%; height: 150vh;"></div>
</body>
</html>Demo page
The demo page: https://yishiashia.github.io/swipe-to-refresh/
Usage
If you want to customize this web component, you can import the library and
implement your new class by extend SwipeToRefresh.
import SwipeToRefresh from "swipe-to-refresh";
class customizedSwipeToRefresh extends SwipeToRefresh {
// override here
}Options
pull-text (optional)
The hint message to ask user pull down the page. Default value is "Swipe to refresh".
drop-text (optional)
The hint message when user pull distance is larger than threshold. Default value is "Release to refresh".
refresh-text (optional)
The hint message when executing the refresh function. Default value is "Refreshing".
finish-text (optional)
The hint message after finish execuing refresh function. Default value is "Updates".