介绍

效果

解题思路

不多BB，上代码，写的复杂了点，如有不懂地方的欢迎留言：

// TODO：待补充代码
let data;

const pageText = document.getElementById('pagination');
const listNode = document.getElementById('list');

function renderPageText() {
    pageText.innerText = `共 ${maxPage} 页，当前 ${pageNum} 页`
}

window.axios.get('/js/carlist.json').then(d => {
    data = d.data;
    maxPage = Math.ceil(data.length / 5);
    renderList();
    renderLeftBtnState();
    renderRightBtnState();
})

function fetchPageData() {
    return data.slice((pageNum - 1) * 5, pageNum * 5);
}

function renderListNode(element) {
    const html = `
            <a href="#" class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">${element.name}</h5>
                    <small>${element.price}元</small>
                </div>
                <p class="mb-1">
                    ${element.description}
                </p>
            </a>
            `;
    const newDom = document.createElement('div');
    newDom.className = 'list-group';
    newDom.innerHTML = html;
    document.getElementById('list').appendChild(newDom)
}

function renderList() {
    const pageData = fetchPageData();
    listNode.innerHTML = '';
    pageData.forEach(element => renderListNode(element));
    renderPageText();
}

let prev = document.getElementById("prev");
let next = document.getElementById("next");

function renderLeftBtnState() {
    if (pageNum <= 1) {
        prev.className = 'page-item disabled';
        return false;
    } else prev.className = 'page-item';
    return true;
}

function renderRightBtnState() {
    if (pageNum >= maxPage) {
        next.className = 'page-item disabled'
        return false;
    } else next.className = 'page-item';
    return true;
}

// 点击上一页
prev.onclick = function() {
    // TODO：待补充代码
    if (!renderLeftBtnState()) return;
    pageNum--;
    renderList();
    renderLeftBtnState();
    renderRightBtnState();
};

// 点击下一页
next.onclick = function() {
    // TODO：待补充代码
    if (!renderRightBtnState()) return;
    pageNum++;
    renderList();
    renderLeftBtnState();
    renderRightBtnState();
};