蓝桥杯2022web省赛赛题题解-10

完整代码见GitHub：github.com/Veilhry/lanqiaoweb/tree/master/10

网页在线预览地址：veilhry.github.io/lanqiaoweb/10/index.html

介绍
分页是前端页面中必不可少的一项功能，下面让我们一起来完成一个课程列表的分页吧。

目标
1.完成数据请求（数据来源js/carlist.json)。在项目目录下已经提供了axios，考生可自行选择是否使用。
2.完成数据分页显示，每页5条数据，默认当前页码为第一页(即 pageNum= 1 )，按照顺序第一页显示1-5条，第二页显示6-10条，依此类推。将每条数据显示到list-group元素中。使用已有代码中list-group，不要修改list-group元素的DOM结构。动态渲染时，list-group示例代码可删除。
3.当页码为第一页时，上一页为禁用状态(class=disabled)，点击无任
何变化。
4.当页码为最后一页时，下一页为禁用状态(class=disabled)，点击无
任何变化。
5.在 id 为pagination元素中正确显示当前页码和总页码（即最大页
码)。当前页码变量使用pageNum，总页码变量使用maxPage。请勿修改当前页码和总页码的变量名称，以免造成判题无法通过。实现效果如下

题解

本题主要考察原生js的综合应用，数据的分页展示，需要注意边界情况下按钮的编号，以及每次按钮所需要展示的数据。

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
let listGroup = document.querySelector('.list-group')
let page = document.querySelector('.col #pagination')
// TODO：待补充代码
let list = []
axios.get('./js/carlist.json').then(res => {
  console.log(res.data);
  list = res.data
  maxPage = list.length
  console.log(maxPage);


  for (let i = 0; i < 5; i++) {
    let price = list[i].price / 100
    let html = `<a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">${list[i].name}</h5>
    <small>${price.toFixed(2)}元</small>
    </div>
    <p class="mb-1">${list[i].description}</p>
    </a>`
    listGroup.innerHTML += html
  }
  page.innerHTML = `共${Math.ceil(maxPage / 5)}页，当前${pageNum}页`
})

var title = document.querySelector('h5.mb-1')
var p = document.querySelector('p.mb-1')
var money = document.querySelector('small')


// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  // TODO：待补充代码
  if (pageNum == 1) return
  pageNum--
  var start = (pageNum - 1) * 5
  var end = start + 5
  listGroup.innerHTML = ''
  if (start + 5 < 0)
    end = 0
  for (let i = start; i < end; i++) {
    let price = list[i].price / 100
    let html = `<a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">${list[i].name}</h5>
    <small>${price.toFixed(2)}元</small>
    </div>
    <p class="mb-1">${list[i].description}</p>
    </a>`
    listGroup.innerHTML += html
  }
  if (pageNum == 1) {
    this.classList.add('disabled')
  }
  if (pageNum <= maxPage) {
    next.classList.remove('disabled')
  }
  page.innerHTML = `共${Math.ceil(maxPage / 5)}页，当前${pageNum}页`
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  // TODO：待补充代码
  if (pageNum == 4) return
  var start = pageNum * 5
  var end = start + 5
  listGroup.innerHTML = ''
  if (start + 5 >= maxPage)
    end = maxPage
  for (let i = start; i < end; i++) {
    let price = list[i].price / 100
    let html = `<a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
    <h5 class="mb-1">${list[i].name}</h5>
    <small>${price.toFixed(2)}元</small>
    </div>
    <p class="mb-1">${list[i].description}</p>
    </a>`
    listGroup.innerHTML += html
  }
  pageNum++
  if (pageNum > 1) {
    prev.classList.remove('disabled')
  }
  if (pageNum == 4) {
    this.classList.add('disabled')
  }
  page.innerHTML = `共${Math.ceil(maxPage / 5)}页，当前${pageNum}页`
};