PulltoRefresh.jsは、スマホやタブレットで画面を下に引っ張ると、ページをリロードできるようになるスクリプトです。指定した要素のみをリフレッシュすることもできます。
スマホやタブレットでデモページにアクセスすると、動作を確認することができます。画面を下に引っ張るとページがリロードされて、アラートが表示されます。
PulltoRefresh.jsの使い方
ファイルのダウンロードと設置
GitHubからファイル一式をダウンロードします。ファイルを解凍すると、distフォルダにpulltorefresh.jsが入っているので、サーバー上にアップロードしてください。
PulltoRefresh.jsのロード
HTMLの</body>直前に以下を追加して、PulltoRefresh.jsをロードします。
1 | <script src="pulltorefresh.js"></script> |
スクリプトの実行
PulltoRefresh.jsのロードの後に、以下を追加するとページ全体がリロードされます。
1 2 3 4 5 6 | <script>PullToRefresh.init({ mainElement: 'body', onRefresh: function(){ window.location.reload(); }});</script> |
特定の要素を指定する場合は、mainElementでIDやクラスを指定します。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <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サイトにも実装できますので、ぜひお試しください。