PulltoRefresh.jsは、スマホやタブレットで画面を下に引っ張ると、ページをリロードできるようになるスクリプトです。指定した要素のみをリフレッシュすることもできます。
スマホやタブレットでデモページにアクセスすると、動作を確認することができます。画面を下に引っ張るとページがリロードされて、アラートが表示されます。
PulltoRefresh.jsの使い方
ファイルのダウンロードと設置
GitHubからファイル一式をダウンロードします。ファイルを解凍すると、distフォルダにpulltorefresh.jsが入っているので、サーバー上にアップロードしてください。
PulltoRefresh.jsのロード
HTMLの</body>直前に以下を追加して、PulltoRefresh.jsをロードします。
<script src="pulltorefresh.js"></script>
スクリプトの実行
PulltoRefresh.jsのロードの後に、以下を追加するとページ全体がリロードされます。
<script>
PullToRefresh.init({
mainElement: 'body',
onRefresh: function(){ window.location.reload(); }
});
</script>
特定の要素を指定する場合は、mainElementでIDやクラスを指定します。
<script>
PullToRefresh.init({
mainElement: '#main', // above which element?
onRefresh: function(){
var promise = new Promise(
function(resolve, reject){
setTimeout(()=>{
resolve();
alert('refresh');
}, 1500);
}
);
return promise;
}
});
</script>
アラートが必要ない場合は、「alert(‘refresh’);」を消去してください。
あとがき
画面を下に引っ張ってリロードしたり、新しいコンテンツを読み込むという動作は、アプリだとよく見かけますね。PulltoRefresh.jsを使えば、簡単にWebサイトにも実装できますので、ぜひお試しください。