案例--瀑布流渲染/无限下拉

约定:   + 一页显示 8 条数据

代码实现:

  + 哪一种分页都需要切割数组的一部分显示出来

  1. 获取元素

    => ul 标签: 渲染的 li 需要填充在内部

    => loading 盒子: 操作显示和隐藏

  2. 准备变量

    => current: 表示当前第几页

    => pagesize: 表示一页多少条(一般在瀑布流内, 是固定的)

    => total: 总页数

  3. 准备一个函数, 进行页面的渲染

    => 根据 cuurent 和 pagesize 去 list 内截取出一部分数据

    => 用于渲染页面

  4. 准备加在第二页

    => 问题1: 什么时候加载第二页 ?

      + 列表区域的底部进入页面以后加载下一页

    => 问题2: 如何判断 ul 的底部进入页面了 ?

      + 卷去的高度 + 浏览器的可视高度 >= ul 的高度 + ul的上方偏移量

      + 表示 ul 的底部进入页面了

      + 需要加载下一页

    => 问题3: 什么时候判断 ?

      + 只要滚动条发生变化, 就要判断一下

      + 需要一个 window.onscroll 事件

<div class="content">
  <ul>
    <!-- JS 渲染 -->
  </ul>
</div>

<div class="loading">
  <img src="https://img0.baidu.com/it/u=3253441216,1530207645&fm=26&fmt=auto&gp=0.jpg" alt="">
</div>

// 1. 获取元素
let ul = document.querySelector('ul')
let loadingBox = document.querySelector('.loading')

// 2. 准备变量
let current = 1
let pagesize = 8
let total = Math.ceil(list.length / pagesize)

// 准备一个开关
// 当 flag 为 true 的时候, 表示开启
// 当 falg 为 false 的时候, 表示关闭
let flag = true

// 3. 准备渲染页面的函数
bindHtml()
let bindHtml = () => {
  // 3-1. 截取数组
  let bind = list.slice((current - 1) * pagesize, current * pagesize)

  // 3-2. 组装一个合适的字符串
  let str = ''
  bind.forEach(item => {
    str += `
      <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>
    `
  })

  // 3-3. 插入到指定标签内
  // 放在 ul 内部
  ul.innerHTML += str
}

// 4. 浏览器滚动事件
window.onscroll = () => {
  // 4-1. 什么情况下肯定不需要加载下一页了 ?
  // 当 current >= total 的时候
  if (current >= total) return

  // 代码能来带这里, 说明有下一页的数据, 需要判断什么时候加载
  // 4-2. 判断是否需要加载下一页数据
  // 判断条件 : 卷去的高度 + 浏览器的可视高度 >= ul 的高度 + ul的上方偏移量
  let window_height = document.documentElement.clientHeight
  let scroll_top = document.documentElement.scrollTop || document.body.scrollTop
  let ul_height = ul.offsetHeight
  let ul_top = ul.offsetTop
  if (scroll_top + window_height >= ul_height + ul_top) {

    // 判断开关
    // 表示开关如果是关闭的
    if (flag === false) return

    // 代码能执行到这里, 说明, flag 是 true
    // 应该去加载下一页了
    // 顺手把开关关上
    flag = false

    // 4-3. 加载下一页
    // 让 loading 效果出现
    loadingBox.classList.add('active')

    // 延迟 1s 加载下一页, 模拟网络加载环境
    setTimeout(() => {
      console.log('加载一页')
      // 4-4. 加载下一页
      current++
      bindHtml()
      // 关闭 loading 效果
      loadingBox.classList.remove('active')

      // 等到页面渲染完毕, loading 效果已经取消了, 页面也变长了, 多的内容已经显示在页面上了
      // 可以继续加载下一页了
      flag = true
    }, 1000)
  }
}