Swiper实现上拉刷新和下拉加载更多（学习笔记④）

来源：互联网发布：销售单据打印软件编辑：程序博客网时间：2024/06/07 01:03

简单粗暴的放码

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

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>

JS结构：

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

资源文件下载地址：https://github.com/SunnyYang222/SwiperUpDown_demo

阅读全文

0 0