スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」

スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」

スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」

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サイトにも実装できますので、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です