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

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

スマホで画面を下に引っ張るとリロードする機能を実装できる「PulltoRefresh.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 次世代の暗号通貨投資法!初心者でも!どなたでも年利36.27% ⁉︎
  • このエントリーをはてなブックマークに追加

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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。