SOURCE

console 命令行工具 X clear

                    
>
console
(function ($) {
    "use strict";
    ['width', 'height'].forEach(function (dimension) {
      var Dimension = dimension.replace(/./, function (m) {
        return m[0].toUpperCase();
      });
      //outerWidth or outerHeight
      $.fn['outer' + Dimension] = function (margin) {
        var elem = this;
        if (elem) {
          var size = elem[dimension]();
          var sides = {
            'width': ['left', 'right'],
            'height': ['top', 'bottom']
          };
          sides[dimension].forEach(function (side) {
            if (margin) {
              size += parseInt(elem.css('margin-' + side), 10);
            }
          });
          return size;
        } else {
          return null;
        }
      }
    });
  })($);
$(function(){
  function refreshPage(){
    console.log('refreshPage');
  }
  
  function prependList(){
    $('#attach-container ul').prepend('<li>item_a'+pn+'</li>')
    $('#attach-container ul').prepend('<li>item_b'+pn+'</li>')
    $('#attach-container ul').prepend('<li>item_c'+pn+'</li>')
	  mainSwiper.slideTo(1, 500, function(){
    	mainSwiper.update();
    });//切换到第一个slide,速度为500毫秒
  }
  var pn = 1;
  function queryList(){
    console.log('queryList');
    pn ++;
  
    $('#attach-container ul').append('<li>item_a'+pn+'</li>')
    $('#attach-container ul').append('<li>item_b'+pn+'</li>')
    $('#attach-container ul').append('<li>item_c'+pn+'</li>')
    mainSwiper.update();
  }
  var reachBeginning = false, reachEnd = false;
  var endY = 0; 
  var queryFinished = false;
  var $topPreloader = $('#topPreloader');
  var mainSwiper = new Swiper('.container > .swiper-container', {
    direction: 'vertical',
    freeMode: true,
    slidesPerView: 'auto',
    onTouchStart: function (swiper, event) {
      reachBeginning = swiper.translate == 0;
      reachEnd = swiper.translate <= endY;
    },
    onTouchEnd: function (swiper, event) {
      if ($topPreloader.hasClass('visible')) {
        $topPreloader.removeClass('visible');
        refreshPage();
      }
      if ($('#bottomLoading').length) {
        $('#bottomLoading').remove();
        queryList();
      }
    },
    onReachEnd: function (swiper) {
      endY = swiper.translate;
    },
    onSliderMove: function (swiper, event) {
      if (swiper.activeIndex == 0 && reachBeginning) {
        if (swiper.touches.diff > 200) {
          $topPreloader.addClass('visible');
        } else {
          $topPreloader.removeClass('visible');
        }
      }
      if (reachEnd && swiper.touches.diff < -100 && !$('#bottomLoading').length && !queryFinished) {
        $('<div id="bottomLoading" style="height: 100px;position: relative;"><div class="loading"></div></div>').appendTo($('#attach-container'));
      }
    }
  });
  
  $("#prepend").on('click',function(e){
    e.preventDefault();
    prependList();
  })
})
<section class="container">
  <div class="preloader" id="topPreloader">
    松开手指,刷新页面...
  </div>
  
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="min-height: 100%;">
        <section id="main-container">
          第一页
        </section>
      </div>
      <div class="swiper-slide" style="min-height: 100%;">
        <section id="attach-container">
          第二页
          <ul></ul>
          <a href="#" id="prepend">prepend</a>
        </section>
      </div>
    </div>
  </div>
</section>
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font-weight: normal;
      vertical-align: baseline;
      background: transparent;
    }

    main, article, aside, figure, footer, header, nav, section, details, summary {
      display: block;
    }

    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    img,
    object,
    embed {
      max-width: 100%;
    }

    html {
      overflow-y: scroll;
    }

    ul {
      list-style: none;
    }

    blockquote, q {
      quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: '';
      content: none;
    }

    a {
      margin: 0;
      padding: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
    }

    del {
      text-decoration: line-through;
    }

    abbr[title], dfn[title] {
      border-bottom: 1px dotted #000;
      cursor: help;
    }

    /* tables still need cellspacing="0" in the markup */
    table {
      border-collapse: separate;
      border-spacing: 0;
    }

    th {
      font-weight: bold;
      vertical-align: bottom;
    }

    td {
      font-weight: normal;
      vertical-align: top;
    }

    hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
    }

    input, select {
      vertical-align: middle;
    }

    pre {
      white-space: pre; /* CSS2 */
      white-space: pre-wrap; /* CSS 2.1 */
      white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
      word-wrap: break-word; /* IE */
    }

    input[type="radio"] {
      vertical-align: text-bottom;
    }

    input[type="checkbox"] {
      vertical-align: bottom;
    }

    select, input, textarea {
      font: 99% sans-serif;
    }

    table {
      font-size: inherit;
      font: 100%;
    }

    small {
      font-size: 85%;
    }

    strong {
      font-weight: bold;
    }

    td, td img {
      vertical-align: top;
    }

    sub, sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
    }

    sup {
      top: -0.5em;
    }

    sub {
      bottom: -0.25em;
    }

    pre, code, kbd, samp {
      font-family: monospace, sans-serif;
    }

    .clickable,
    label,
    input[type=button],
    input[type=submit],
    input[type=file],
    button {
      cursor: pointer;
    }

    button, input, select, textarea {
      margin: 0;
    }

    button,
    input[type=button] {
      width: auto;
      overflow: visible;
    }

    .clearfix:after {
      content: " ";
      display: block;
      clear: both;
    }

    body, html {
      background: #f4f4f4;
      position: relative;
      width: 100%;
      height: 100%;
    }

    .container {
      margin: auto;
      width: 100%;
      height: 100%;
    }

    .container > .swiper-container {
      width: 100%;
      height: 100%;
    }

    .container > .swiper-container .swiper-slide {
      height: auto;
    }

    .preloader {
      position: absolute;
      left: 0;
      top: -100px;
      z-index: 0;
      color: #fff;
      text-align: center;
      line-height: 100px;
      height: 100px;
      width: 100%;
      opacity: 0;
      font-size: 14px;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -o-transition: 300ms;
      transition: 300ms;
      background: rgba(0, 0, 0, 0.1);
    }

    .preloader.visible {
      top: 0;
      opacity: 1;
    }

    .loading {
      width: 42px;
      height: 42px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -21px;
      margin-top: -21px;
      z-index: 10;
      -webkit-transform-origin: 50%;
      -moz-transform-origin: 50%;
      transform-origin: 50%;
      -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
      -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
      animation: swiper-preloader-spin 1s steps(12, end) infinite;
    }

    .loading:after {
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
      background-position: 50%;
      -webkit-background-size: 100%;
      background-size: 100%;
      background-repeat: no-repeat;
    }

#main-container{min-height:100%;}

本项目引用的自定义外部资源