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

Posted lujiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Swiper实现上拉刷新和下拉加载更多相关的知识,希望对你有一定的参考价值。

简单粗暴的放码

一个简单的效果 分页器效果中加下拉刷新和上拉加载功能

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实现上拉刷新和下拉加载更多的主要内容,如果未能解决你的问题,请参考以下文章

uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

vux (scroller)上拉刷新下拉加载更多

微信小程序下拉加载与上拉刷新

使用iScroll实现上拉或者下拉刷新

MUI实现上拉刷新和下拉加载