examwin_web/js/exam_list.js

$(function () {
  $("img").lazyload();
  const globaldata = {
    active: null,
  }
  let params = lxd.parseUrl(window.location.href).query,
    my_nav = $(".my-nav"), my_nav_lis = my_nav.find("li"), id = params["id"] || 0;
  if (id < my_nav_lis.length) {
    my_nav_lis.removeClass("active");
    $(my_nav_lis[id]).addClass("active");
  }
  let grade = $(my_nav_lis[id]).data("id"), lock = false, type = $(my_nav_lis[id]), zlock = "数据加载中...",
    // 加载的数据
    area = params["area"] || '';
  if (!area) {
    var currentPage = 3, totalPage = 3;
  } else {
    $(".my-list").empty();
    var currentPage = 1, totalPage = 1;
    $(".my-loading").show();
    data({ currentPage, area, grade }).then(res => { totalPage = res.totalPage; currentPage++; type.data("totalPage", res.totalPage); type.data("currentPage", currentPage); lock = res.lock; $(".my-loading").hide(); })
  }
  my_nav.click(function (e) {
    $(".my-loading").hide();
    if (e.target.className == "my-nav") return false;
    let active = Array.prototype.slice.call($(this).find("li")).indexOf(e.target);
    if (active == globaldata.active) return false;
    globaldata.active = active;
    type = $(e.target);
    let i = type.data("zlock");
    i ? $(".my-loading").show() : '';
    z_lock = i || zlock;
    $(".my-loading").html(z_lock).hide();
    grade = type.data("id");
    lock = type.data("lock") || false;
    if (!area) {
      currentPage = type.data("currentPage") || 3;
      totalPage = type.data("totalPage") || 3;
    } else {
      currentPage = type.data("currentPage") || 1;
      totalPage = type.data("totalPage") || 1;
      $(".my-loading").show();
      data({ currentPage, area, grade }).then(res => { totalPage = res.totalPage; currentPage++; type.data("totalPage", res.totalPage); type.data("currentPage", currentPage); lock = res.lock; $(".my-loading").hide(); })
    }
    $(this).find(".active").removeClass("active");
    type.addClass("active");
    $(".ke>.active").removeClass("active");
    $($(".ke>.my-list")[active]).addClass("active");

  })

  // 加载数据
  // 显示区高度
  let ch = document.documentElement.clientHeight || document.body.clientHeight;
  $(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, area, grade }).then(res => { totalPage = res.totalPage; currentPage++; type.data("totalPage", res.totalPage); type.data("currentPage", currentPage); lock = res.lock; $(".my-loading").hide(); })
    }
    if (c == 0 && currentPage > totalPage) {
      type.data("zlock", "已经没有可以加载的数据了")
      type.data("lock", true)
      $(".my-loading").html("已经没有可以加载的数据了").show();
    }
  })
  // 加载数据
  function data (data) {
    return new Promise(resolve => {
      $.ajax({
        url: "http://api.gaokaoapp.net/exampaper/h/",
        data: {
          ...data,
          pageSize: 10
        },
        type: "get",
        error: function (error) {
          $(".my-loading").html("已经没有可以加载的数据了")
        },
        success: function (res) {
          let { dataList, totalPage } = res.data;
          console.log(dataList)
          console.log(data.area)
          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="province">${item.areas}</div>
              <div class="time">${item.status_text}<span>${item.delay_time}</span></div>
              </div>
            </a>`;
              $(father).append(str);
            }
          )
          $(".ke>.active").append(father);
          $("img").lazyload();
          resolve({ lock: false, totalPage })
        }
      })
    })
  }
  // 小屏幕 点击背景关闭 弹窗
  $("#nav-sm").click(function () {
    $(".my-province div[data-province='true']").hide();
  })
})