简单粗暴的放码
一个简单的效果 分页器效果中加下拉刷新和上拉加载功能
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
来源: http://www.bubuko.com/infodetail-2820767.html