app手机端上拉刷新和下拉加载

html5仿app手机端上拉刷新最新的列表，下拉加载最新的数据。swiper是一款多功能插件，支持图片触屏滑动，手机上拉和下拉加载。

分类：手机特效 > 分页难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

swiper容器和上拉加载

<div class="preloader"> Loading... </div>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide red-slide">
      <div class="title">Slide 1</div>
    </div>
    <div class="swiper-slide blue-slide">
      <div class="title">Slide 2</div>
    </div>
  </div>
</div>

引入swiper插件

<script src="js/idangerous.swiper.min.js"></script>

var holdPosition = 0;
  var mySwiper = new Swiper('.swiper-container',{
    slidesPerView:'auto',
    mode:'vertical',
    watchActiveIndex: true,
    onTouchStart: function() {
      holdPosition = 0;
    },
    onResistanceBefore: function(s, pos){
      holdPosition = pos;
    },
    onTouchEnd: function(){
      if (holdPosition>100) {
        mySwiper.setWrapperTranslate(0,100,0)
        mySwiper.params.onlyExternal=true
        $('.preloader').addClass('visible');
        loadNewSlides();
      }
    }
  })
  var slideNumber = 0;
  function loadNewSlides(){
    setTimeout(function(){
      //Prepend new slide
      var colors = ['red','blue','green','orange','pink'];
      var color = colors[Math.floor(Math.random()*colors.length)];
      mySwiper.prependSlide('<div class="title">sucaihuo.com '+slideNumber+'</div>', 'swiper-slide '+color+'-slide');
      //Release interactions and set wrapper
      mySwiper.setWrapperTranslate(0,0,0)
      mySwiper.params.onlyExternal=false;
      //Update active slide
      mySwiper.updateActiveSlide(0)
      //Hide loader
      $('.preloader').removeClass('visible');
    },1000)
    slideNumber++;
  }