NOTE 029 / 2019年
続きを読み進める画面の設計
一覧を読み進める画面で、読み込みと位置の扱いを整理します。
読了目安 約2分
無限スクロールは、続きを読みたい人には便利ですが、どこまで読んだかを見失いやすい仕組みです。最初に読み込む件数、追加で読む件数、終わりに達したときの表示を決めておきます。
画面の高さが変わるため、戻ってきたときの位置を保つ工夫も必要です。読み込み中に同じリクエストを重ねないこと、失敗したときに再試行できることも確認します。
押さえたい点
- 01読み込む件数を決める
- 02終わりの表示を用意する
- 03同じリクエストを重ねない
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- Nuxt 入門 外部サイトnuxt.com
- Nuxt モジュール 外部サイトnuxt.com
- Nuxt の描画 外部サイトnuxt.com
- Vue.js ガイド 外部サイトvuejs.org
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- TypeScript の設定 外部サイトtypescriptlang.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- React リファレンス 外部サイトreact.dev
- Vue.js API 外部サイトvuejs.org
- Vue のリアクティブ基礎 外部サイトvuejs.org
- Vue コンポーネント基礎 外部サイトvuejs.org
- Vue Transition 外部サイトvuejs.org
- web.dev 外部サイトweb.dev