swiper制作tab选项卡手机滑动下拉刷新加载代码

swiper制作tab选项卡手机滑动下拉刷新加载代码

一款swiper手机下拉刷新代码,手机滑动实现下拉刷新,tab选项卡列表往下翻刷新加载数据。

使用方法
页面引入jquery-2.1.4.min.js、swiper.jquery.min.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<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>
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();
});

文件信息:

    2

    发表评论