[実践1]ページングの実施
8903 ワード
1.ページの値を記憶する
現在のページの位置値を記憶する変数値を持つ必要があります.
ステータス値はグローバルに管理する必要があるため、グローバル変数として宣言します.
現在のページの位置値を記憶する変数値を持つ必要があります.
ステータス値はグローバルに管理する必要があるため、グローバル変数として宣言します.
const store = {
currentPage: 1
}
2.ページUIの作成function newsFeed() {
// ...
newsList.push(`
<div>
<a href="#/page/${store.currentPage - 1}">이전 페이지</a>
<a href="#/page/${store.currentPage + 1}">다음 페이지</a>
</div>
`);
containerEl.innerHTML = newsList.join("");
3.ルーティング経路構造の取得function newsFeed() {
// ...
for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
newsList.push(`
<li>
<a href="#/show/${newsFeed[i].id}">
${newsFeed[i].title}(${newsFeed[i].comments_count})
</a>
</li>
`);
}
// ...
}
function newsDetail() {
//...
containerEl.innerHTML = `
<h1>${newsContent.title}</h1>
<div>
<a href="#/page/${store.currentPage}">목록으로</a>
</div>
`;
//...
}
function router() {
const routePath = location.hash;
if (routePath === "") {
newsFeed();
} else if (routePath.indexOf("#/page/") >= 0) {
const page = Number(routePath.substr(7));
store.currentPage = page;
newsFeed();
} else {
newsDetail();
}
}
Reference
この問題について([実践1]ページングの実施), 我々は、より多くの情報をここで見つけました https://velog.io/@ginameee/페이징-구현하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol