Swiper實現上拉刷新和下拉加載更多
阿新 • • 發佈：2018-10-25
htm tran har loading transform wrapper new utf item
簡單粗暴的放碼
一個簡單的效果 分頁器效果中加下拉刷新和上拉加載功能
HTML結構：
1 <div class="a">標題</div> 2 <div class="tab"> 3 <a class="active" href="javascript:;">tab1</a> 4 <a href="javascript:;">tab2</a> 5 <a href="javascript:;">tab3</a> 6 </div> 7 <div class="swiper-container"> 8 <div class="refreshtip">下拉可以刷新</div> 9 <div class="swiper-wrapper w"> 10 <div class="swiper-slide d"> 11 <div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div> 12 <div class="swiper-container2"> 13 <div class="swiper-wrapper"> 14 <div class="swiper-slide list-group"> 15 <div class="list-group-item">列表</div> 16 <div class="list-group-item">列表</div> 17 <div class="list-group-item">列表</div> 18 <div class="list-group-item">列表</div> 19 <div class="list-group-item">列表</div> 20 <div class="list-group-item">列表</div> 21 </div> 22 <div class="swiper-slide list-group"> 23 <div class="list-group-item">列表</div> 24 <div class="list-group-item">列表</div> 25 <div class="list-group-item">列表</div> 26 <div class="list-group-item">列表</div> 27 <div class="list-group-item">列表</div> 28 <div class="list-group-item">列表</div> 29 </div> 30 <div class="swiper-slide list-group"> 31 <div class="list-group-item">列表</div> 32 <div class="list-group-item">列表</div> 33 <div class="list-group-item">列表</div> 34 <div class="list-group-item">列表</div> 35 <div class="list-group-item">列表</div> 36 <div class="list-group-item">列表</div> 37 </div> 38 </div> 39 </div> 40 </div> 41 </div> 42 43 <div class="loadtip">上拉加載更多</div> 44 <div class="swiper-scrollbar"></div> 45 </div> 46 --------------------- 47
JS結構：
1 <script type="text/javascript"> 2 var loadFlag = true; 3 var oi = 0; 4 var mySwiper = new Swiper(‘.swiper-container‘,{ 5 direction: ‘vertical‘, 6 scrollbar: ‘.swiper-scrollbar‘, 7 slidesPerView: ‘auto‘, 8 mousewheelControl: true, 9 freeMode: true, 10 onTouchMove: function(swiper){ //手動滑動中觸發 11 var _viewHeight = document.getElementsByClassName(‘swiper-wrapper‘)[0].offsetHeight; 12 var _contentHeight = document.getElementsByClassName(‘swiper-slide‘)[0].offsetHeight; 13 14 15 if(mySwiper.translate < 50 && mySwiper.translate > 0) { 16 $(".init-loading").html(‘下拉刷新...‘).show(); 17 }else if(mySwiper.translate > 50 ){ 18 $(".init-loading").html(‘釋放刷新...‘).show(); 19 } 20 }, 21 onTouchEnd: function(swiper) { 22 var _viewHeight = document.getElementsByClassName(‘swiper-wrapper‘)[0].offsetHeight; 23 var _contentHeight = document.getElementsByClassName(‘swiper-slide‘)[0].offsetHeight; 24 // 上拉加載 25 if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) { 26 // console.log("已經到達底部！"); 27 28 if(loadFlag){ 29 $(".loadtip").html(‘正在加載...‘); 30 }else{ 31 $(".loadtip").html(‘沒有更多啦！‘); 32 } 33 34 setTimeout(function() { 35 for(var i = 0; i <5; i++) { 36 oi++; 37 $(".list-group").eq(mySwiper2.activeIndex).append(‘<li class="list-group-item">我是加載出來的‘+oi+‘...</li>‘); 38 } 39 $(".loadtip").html(‘上拉加載更多...‘); 40 mySwiper.update(); // 重新計算高度; 41 }, 800); 42 } 43 44 // 下拉刷新 45 if(mySwiper.translate >= 50) { 46 $(".init-loading").html(‘正在刷新...‘).show(); 47 $(".loadtip").html(‘上拉加載更多‘); 48 loadFlag = true; 49 50 setTimeout(function() { 51 $(".refreshtip").show(0); 52 $(".init-loading").html(‘刷新成功！‘); 53 setTimeout(function(){ 54 $(".init-loading").html(‘‘).hide(); 55 },800); 56 $(".loadtip").show(0); 57 58 //刷新操作 59 mySwiper.update(); // 重新計算高度; 60 }, 1000); 61 }else if(mySwiper.translate >= 0 && mySwiper.translate < 50){ 62 $(".init-loading").html(‘‘).hide(); 63 } 64 return false; 65 } 66 }); 67 var mySwiper2 = new Swiper(‘.swiper-container2‘,{ 68 onTransitionEnd: function(swiper){ 69 70 $(‘.w‘).css(‘transform‘, ‘translate3d(0px, 0px, 0px)‘) 71 $(‘.swiper-container2 .swiper-slide-active‘).css(‘height‘,‘auto‘).siblings(‘.swiper-slide‘).css(‘height‘,‘0px‘); 72 mySwiper.update(); 73 74 $(‘.tab a‘).eq(mySwiper2.activeIndex).addClass(‘active‘).siblings(‘a‘).removeClass(‘active‘); 75 } 76 77 }); 78 $(‘.tab a‘).click(function(){ 79 80 $(this).addClass(‘active‘).siblings(‘a‘).removeClass(‘active‘); 81 mySwiper2.slideTo($(this).index(), 500, false) 82 83 $(‘.w‘).css(‘transform‘, ‘translate3d(0px, 0px, 0px)‘) 84 $(‘.swiper-container2 .swiper-slide-active‘).css(‘height‘,‘auto‘).siblings(‘.swiper-slide‘).css(‘height‘,‘0px‘); 85 mySwiper.update(); 86 }); 87 </script> 88 ---------------------
註意：
需要引入css和js
<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
資源文件下載地址：https://github.com/SunnyYang222/SwiperUpDown_demo
Swiper實現上拉刷新和下拉加載更多