簡單粗暴的放碼

一個簡單的效果 分頁器效果中加下拉重新整理和上拉載入功能

HTML結構：

<div class="a">標題</div>
<div class="tab">
   <a class="active" href="javascript:;">tab1</a>
   <a href="javascript:;">tab2</a>
   <a href="javascript:;">tab3</a>
</div>
<div class="swiper-container"
 
>
   <div class="refreshtip">下拉可以重新整理</div>
   <div class="swiper-wrapper w">
      <div class="swiper-slide d">
         <div class="init-loading list-group-item text-center" style="display: none;">下拉可以重新整理</div>
         <div class="swiper-container2">
            <div 
 
class="swiper-wrapper">
               <div class="swiper-slide list-group">
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div 
 
class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
               </div>
               <div class="swiper-slide list-group">
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
               </div>
               <div class="swiper-slide list-group">
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
                  <div class="list-group-item">列表</div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="loadtip">上拉載入更多</div>
   <div class="swiper-scrollbar"></div>
</div>

<script type="text/javascript">
var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container',{
      direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchMove: function(swiper){    //手動滑動中觸發
var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
if(mySwiper.translate < 50 && mySwiper.translate > 0) {
            $(".init-loading").html('下拉重新整理...').show();
}else if(mySwiper.translate > 50 ){
            $(".init-loading").html('釋放重新整理...').show();
}
      },
onTouchEnd: function(swiper) {
         var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
// 上拉載入
if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
                // console.log("已經到達底部！");
if(loadFlag){
                   $(".loadtip").html('正在載入...');
}else{
                   $(".loadtip").html('沒有更多啦！');
}
                
                setTimeout(function() {
                    for(var i = 0; i <5; i++) {
                       oi++;
$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加載出來的'+oi+'...</li>');
}
                     $(".loadtip").html('上拉載入更多...');
mySwiper.update(); // 重新計算高度;
}, 800);
}
            
            // 下拉重新整理
if(mySwiper.translate >= 50) {
                $(".init-loading").html('正在重新整理...').show();
$(".loadtip").html('上拉載入更多');
loadFlag = true;
setTimeout(function() {
                    $(".refreshtip").show(0);
$(".init-loading").html('重新整理成功！');
setTimeout(function(){
                       $(".init-loading").html('').hide();
},800);
$(".loadtip").show(0);
//重新整理操作
mySwiper.update(); // 重新計算高度;
}, 1000);
}else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
               $(".init-loading").html('').hide();
}
            return false;
}
   });
var mySwiper2 = new Swiper('.swiper-container2',{
      onTransitionEnd: function(swiper){
         
         $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
         $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');
}
      
   });
$('.tab a').click(function(){
      
      $(this).addClass('active').siblings('a').removeClass('active');
mySwiper2.slideTo($(this).index(), 500, false)
      
      $('.w').css('transform', 'translate3d(0px, 0px, 0px)')
      $('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
</script>

注意：

需要引入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>