首页>>Jquery文字>>jQuery模拟原生态App上拉刷新下拉加载效果(2018-08-05)

jQuery模拟原生态App上拉刷新下拉加载效果

用手机查看演示效果会更好

jQuery模拟原生态App上拉刷新下拉加载效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.   var holdPosition = 0;  
  3.   var mySwiper = new Swiper('.swiper-container',{  
  4.     slidesPerView:'auto',  
  5.     mode:'vertical',  
  6.     watchActiveIndex: true,  
  7.     onTouchStart: function() {  
  8.       holdPosition = 0;  
  9.     },  
  10.     onResistanceBefore: function(s, pos){  
  11.       holdPosition = pos;  
  12.     },  
  13.     onTouchEnd: function(){  
  14.       if (holdPosition>100) {  
  15.         mySwiper.setWrapperTranslate(0,100,0)  
  16.         mySwiper.params.onlyExternal=true  
  17.         $('.preloader').addClass('visible');  
  18.         loadNewSlides();  
  19.       }  
  20.     }  
  21.   })  
  22.   var slideNumber = 0;  
  23.   function loadNewSlides(){  
  24.     setTimeout(function(){  
  25.       //Prepend new slide  
  26.       var colors = ['red','blue','green','orange','pink'];  
  27.       var color = colors[Math.floor(Math.random()*colors.length)];  
  28.       mySwiper.prependSlide('<div class="title">freejs.net '+slideNumber+'</div>', 'swiper-slide '+color+'-slide');  
  29.       //Release interactions and set wrapper  
  30.       mySwiper.setWrapperTranslate(0,0,0)  
  31.       mySwiper.params.onlyExternal=false;  
  32.       //Update active slide  
  33.       mySwiper.updateActiveSlide(0)  
  34.       //Hide loader  
  35.       $('.preloader').removeClass('visible');  
  36.     },1000)  
  37.     slideNumber++;  
  38.   }  
  39.   </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_663.html