examwin_web/js/new_list.js

$(function () {
  // 图片懒加载
  $("img").lazyload();
  // 显示区高度
  let ch = document.documentElement.clientHeight || document.body.clientHeight;
  let lock = false;
  // 加载 数据
  let currentPage = 3, totalPage = 3;
  $(window).scroll(function () {
    if (lock) return false;
    // 滑动区高度
    let sh = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 滑动位置
    let st = document.documentElement.scrollTop || document.body.scrollTop;
    let c = sh * 1 - ch * 1 - st * 1;
    if (c == 0 && currentPage <= totalPage) {
      lock = true;
      $(".my-loading").show();
      data({ currentPage }).then(res => { totalPage = res.totalPage; currentPage++; lock = res.lock; $(".my-loading").hide(); })
    }
  })
  // 加载数据
  function data (data) {
    return new Promise(resolve => {
      $.ajax({
        url: "http://api.gaokaoapp.net/member/news/",
        data: {
          ...data,
          pageSize: 10
        },
        type: "get",
        error: function (error) {
          $(".my-loading").html("已经没有可以加载的数据了")
        },
        success: function (res) {
          let { dataList, totalPage } = res.data;
          let father = document.createDocumentFragment();
          Array.from(dataList).forEach(
            item => {
              let str = `<a target="_blank" href="http://www.gaokaoapp.net/h_exam/${item.id}.html" class="list-item">
              <div class="item-img">
                <img  data-original="${item.thumbnail}"
                src="../imgs/app.png"
                  alt="">
              </div>
              <div class="item-detail">
                <div class="title">${item.title}</div>
                <div class="time">${item.source}<span>${item.delay_time}</span></div>
              </div>
            </a>`
              $(father).append(str);
            }
          )
          $(".list").append(father);
          $("img").lazyload();
          resolve({ lock: false, totalPage })
        }
      })
    })
  }
})