zhuishuyun_quickapp/resources/views/wap-browser/catalog.blade.php

@extends('wap-browser.template')

@section('head')
<link rel="stylesheet" href="/wapbrowser/web/component.css">
<style>

</style>
@endsection

@section('body')
<div class="book-catalog">
  @component('wap-browser.component.header',['name'=>$title])
  @endcomponent
  <div class="spinner-prev" style="height: 30px; overflow: hidden;display:none">
    <div class="mint-spinner-snake" style="margin: 0  auto;border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 28px; width: 28px;"></div>
  </div>
  @component('wap-browser.component.catalog',['catalogs'=>[]])
  @endcomponent
  <div class="spinner-next" style="height: 30px; overflow: hidden;">
    <div class="mint-spinner-snake" style="margin: 0  auto;border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 28px; width: 28px;"></div>
  </div>
</div>
@endsection

@section('foot')
<script>
  var last = false,
    first = true,
    page = 1;

  function createCatalogItem(catalog){
    var item = document.createElement('a')
    item.setAttribute('href', '/reader?bid='+catalog.bid+'&cid='+catalog.chapter_id+'')
    item.setAttribute('class', 'book-catalog-item')
    if(catalog.chapter_is_vip) {
      item.innerHTML = '\
      <span class="book-catalog-item__name">'+catalog.chapter_name+'</span>\
      <img src="/wapbrowser/web/vip.png" class="book-catalog-item__vip">'
    } else {
      item.innerHTML = '<span class="book-catalog-item__name">'+catalog.chapter_name+'</span>'
    }
    return item
  }

  function showLoading(side,json){
    // 下一页
    if(side){
      if( json.data.meta.last_page === json.data.meta.current_page ) {
        last = true
        document.querySelector('.spinner-next').style.display = 'none'
      } else {
        last = false
        document.querySelector('.spinner-next').style.display = ''        
      }
    } else {
      // 上一页
      if( json.data.meta.current_page > 1) {
        first = false
        document.querySelector('.spinner-prev').style.display = ''
        document.documentElement.scrollTop = document.documentElement.clientHeight
      } else {
        first = true
        document.querySelector('.spinner-prev').style.display = 'none'        
      }
    }
  }

  /*
  * append = true 下一页
  * append = false 上一页 
  */
  function getCatalogList(append){
    var listWrapper = document.querySelector('.book-catalog-list')
    var params = {
      page: page
    }
    var url = '/apiCatalog?bid={{  $bid }}&page='+params.page
    function cb(data){
      getCatalogList.loading = false;
      data.data.list.map(function(catalog){
        var newEl = createCatalogItem(catalog)
        append ? listWrapper.appendChild(newEl) : listWrapper.insertBefore(newEl,listWrapper.children[0])
      })
      showLoading(append, data)
    }
    getJSON(url,cb)
    getCatalogList.loading = true
  }

  addEvent(window, 'scroll', function(e) {
    if(getCatalogList.loading || last) return
    var scrollbottom = Math.max(window.pageYOffset || 0, document.documentElement.scrollTop) + document.documentElement.clientHeight
    if(scrollbottom + 50 > document.body.offsetHeight) {
      page++
      getCatalogList(true)
    }
    // 加载前一页还不是很完善
    if(document.documentElement.scrollTop === 0){
      if(first) return
      page--
      getCatalogList(false)
    }
  })

  getCatalogList(true)
</script>
@endsection