Swiper实现上拉刷新和下拉加载更多

 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

 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 ---------------------