分页的练习

需要做的内容

1. 渲染页面 首次打开所要展示的内容
2. 上一页 下一页 能实现点击后修改页面
3. 修改每页展示数据 预计效果图

//h5
<div class="header">顶部导航</div>

    <div class="pagination">
        <span class="prev">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>

    <ul>

    </ul>
    <div class="footer">底部导航</div>

获取元素

       var oUl = document.querySelector('ul')  // ul 标签, 内部放 商品的 li
       var total = document.querySelector('.total')    // 页码标签
       var prev = document.querySelector('.prev')  // 上一页按钮
       var next = document.querySelector('.next')  // 下一页按钮
       var oSelect = document.querySelector("select")

准备变量

       var currentNum = 1  // 默认当前页 为 第 1 页
       var pageSize = 4    // 默认打开时 每页展示 4 条数据
       var totalNum = 0    // 记录一下总页码

渲染函数

function myFn() {
      var newList = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)
          oUl.innerHTML = newList.reduce(function (prev, item) {
              return prev + `
                  <li>
                      <img src="${item.pic}" alt="">
                      <p>${item.name}</p>
                      <p>城市: ${item.city}</p>
                      <p>地址: ${item.address}</p>
                      <p>价格: ${item.price}</p>
                      <p>时间: ${item.showTime}</p>
                  </li>`
          }, '')
       totalNum = Math.ceil(list.length / pageSize)    // 通过向上取整, 计算总页码
       total.innerHTML = `${currentNum} / ${totalNum}`
       
       currentNum === 1 ? prev.classList.add('disable') : prev.classList.remove('disable')
       currentNum === totalNum ? next.classList.add('disable') : next.classList.remove('disable')
         } 
      // 1. 首次打开页面, 直接调用
      myFn()

      //点击下一页
      next.onclick = function () {
          if (currentNum === totalNum) return
          currentNum++
          myFn()
      }
      //点击上一页
      prev.onclick = function () {
          if (currentNum === 1) return
          currentNum--
          myFn()
      }
      //4.改变每页展示数据
      oSelect.onchange = function () {
          pageSize = oSelect.value
          myFn()
      }