头部背景图片
小畅的学习笔记 |
小畅的学习笔记 |

几种页面滑动插件（swiper、fullPage、hammer）

2022-01-05
#swiper #fullPage #hammer

最近做年度奋斗轨迹项目的时候，需要引用页面滑动插件，刚开始用的fullPage插件，做的差不多了才发现引用fullPage在ios机上滑动会出现卡顿的现象，于是乎又含泪重新换成swiper插件，因此记录一下几个滑动插件的差别~
学习参考：https://www.cnblogs.com/rachelch/p/9331054.html

1、使用hammer，自己实现滑动垂直切换页面（不推荐！！）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>意礴足型护照</title>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="MobileOptimized" content="360"/>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .swiper-container{position:relative;}
        .swiper-slide{
            width: 100%;
            height: 100%;
            background: #fff;
            position: absolute;
            top:0;
            left:0;
        }
        .slide1{
            background: pink;
        }
        .slide2{
            background: lightgreen;
        }
        .slide3{background: dodgerblue}
        .slide4{background:mediumpurple}
        .slide5{background:darkorange}
        .slide6{
            background: orangered;
        }
        .font-size{
            height: 10%;
            box-shadow: 0px 0px 20px 0px #E6E6E6;
        }
        .font-long{
            height: 27%;
            margin-top: 1vh;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            box-shadow: 0px 0px 20px 0px #E6E6E6;
        }
        .font-long-title{
            height: 34px;
            line-height: 34px;
            background-color: rgba(249,249,249,1);
            flex: none;
            -webkit-flex: none;
        }
        .foot-scale{
            flex: auto;
            -webkit-flex: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: space-between;
            -webkit-justify-content: space-between;
        }
        .font-weight{
            height: 28%;
            margin-top: 1vh;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            box-shadow: 0px 0px 20px 0px #E6E6E6;
        }
        .arch-turn{
            height: 32%;
            margin-top: 1vh;
        }
        .arch-turn-title{
            height: 34px;
            line-height: 34px;
            background-color: rgba(249,249,249,1);
        }
        .arch-turn>ul{
            width: 100%;
            height: 100%;
        }
        .arch-turn li{
            width: 49%;
            height: 100%;
            float: left;
            box-shadow: 0px 0px 20px 0px #E6E6E6;
        }
        .arch-turn li:first-child{
            margin-right: 2%;
        }
        .arch-turn li>div{
            width: 100%;
        }
        .foot-arch{
            width: 100%;
            height: 19vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            margin-top: 1vh;
        }
        .fs-16{
            font-size: 16px;
        }
        .fs-12{
            font-size: 12px;
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>    
<!--滑动页面-->
    <div class="swiper-container" id="swiperContainer">
        <!-- 第一页-->
        <div class="swiper-slide slide1" id="slide1" data-name="slide"> 
            <div style="height: 50%;background: white;">1111</div>
        </div>
        <!-- 第二页-->
        <div class="swiper-slide slide2" id="slide2" data-name="slide">
            <div style="height: 70%;background: white;">2222</div>
        </div>

        <!-- 第三页-->
        <div class="swiper-slide slide3" id="slide3" data-name="slide">
            33333
        </div>
        <!-- 第四页-->
        <div class="swiper-slide slide4" id="slide4" data-name="slide">
            4444
        </div>
        <!--  第五页-->
        <div class="swiper-slide slide5" id="slide5" data-name="slide">
            55555
        </div>
        <!--  第六页 -->
        <div class="swiper-slide slide6" id="slide6" data-name="slide">
            66666
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script src="js/hammer.min.js"></script>
    <script>
        var main= {
            height:$(window).height(),
            width:$(window).width(),
            init:function(){
                function fixPagesHeight() {
                    $('.swiper-slide').css({'height': main.height});
                    var length = $(".swiper-container>.swiper-slide").length;
                    $('.swiper-container').css({'height': length*main.height});
                }
                $(window).on('resize', function() {
                    fixPagesHeight();
                })
                fixPagesHeight();
                var swiperTotal=$(".swiper-container>.swiper-slide");
                var length=swiperTotal.length;
                $.each(swiperTotal,function(i,item){
                    swiperTotal.eq(i).css("z-index",length-i).attr("data-num",i+1);
                    var dataNum = swiperTotal.eq(i).attr('data-num');
                    swiperTotal.eq(i).css("top", (dataNum-1) * main.height);
                })

                function loop(k){
                    for(var i=0; i< length; i++){
                        if(k< length+k){
                            swiperTotal.eq(i).animate({'top': main.height*k+'px'});
                            k++;
                        }else{
                            return false;
                        }

                    }
                }
                function setTop(num){
                    var k = 0;
                    if(num){
                        k = 2 - num;
                        loop(k);
                    }
                }
                function setTop2(num){
                    var k = 0;
                    if(num){
                        k = -num;
                        loop(k);
                    }
                }

                //为了解决swiper-slide里面很多元素的时候，查找不到swiper-slide的data-num
                function getparentele(ele){
                    if(ele.dataset && ele.dataset.name){
                        if(ele.dataset.name == 'slide'){
                            return ele
                        }else{
                            return getparentele(ele.parentNode)
                        }        
                    }else{
                        return getparentele(ele.parentNode)
                    }

                }
                //默认行为只支持左右，上下操作还需要额外设置
                var element = document.getElementById('swiperContainer');
                var hammertime = new Hammer(element);

                hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

                hammertime

                .on('swipedown', function(e){
                    var num = parseInt(getparentele(e.target).dataset.num);
                    if(num>1){
                        setTop(num);
                    }
                })

                .on('swipeup', function(e){
                    var num = parseInt(getparentele(e.target).dataset.num);
                    if(num<6){
                        setTop2(num);
                    }
                });
                /*
                *上述虽然能滑动切换页面，但是会存在一个问题，当快速滑动的时候，会滑动好几个页面。
                * swiper滑动就相对稳定。
                * fullPage再ios手机上滑动切页，很不稳定。没有swiper稳定
                * 
                * */
            }
        }
        $(window).load(function(){
            main.init();
        })
    </script>
</body>
</html>

缺点：上述虽然能滑动切换页面，但是会存在一个问题，当快速滑动的时候，会滑动好几个页面。

2、使用fullPage（不推荐！！）

教学官网：http://fullpage.81hu.com/
实例：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
    <meta name="MobileOptimized" content="360"/>
    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" /> 
</head>
<body> 
    <div id="dowebok"> 
        <div class="section" id="page1" style="background: hotpink;"> 
            1
        </div> 
        <div class="section" id="page2" style="background: pink;"> 
            2
        </div> 
        <div class="section" id="page3" style="background: lightgreen;"> 
            3
        </div> 
        <div class="section" id="page4" style="background: dodgerblue"> 
            4
        </div> 
        <div class="section" id="page5" style="background:mediumpurple"> 
            5
        </div> 
        <div class="section" id="page6" style="background:darkorange"> 
            6
        </div> 
    </div> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/jquery.fullPage.js"></script> 
    <script type="text/javascript">
        $(function(){
            $('#dowebok').fullpage({
                afterLoad : function (anchorLink, index) {

                },
                onLeave : function (index, direction) {
                    console.log(index, direction)
                }
            }); 
        });  
    </script>
</body>
</html>

缺点：fullPage在ios手机上滑动切页，很不稳定。滑动切换的时候，波动比较大

3、swiper（推荐！！）

教学官网：https://www.swiper.com.cn/
实例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
        <link rel="stylesheet" href="css/swiper.min.css">
    </head>

    <body>
        <div class="swiper-container" id="swiperContainer">
            <div class="swiper-wrapper">
                <!-------------slide1----------------->
                <section class="swiper-slide" style="background:pink;">
                    1
                </section>
                <!---------------slide2-------------->   
                <section class="swiper-slide" style="background:yellow;">
                    2
                </section>
                <!----------------slide3-------------->
                <section class="swiper-slide">
                    3
                </section>
                <!-------------slide4----------------->
                <section class="swiper-slide">
                    4
                </section>
                <!-------------slide5----------------->
                <section class="swiper-slide">
                    5
                </section>
                <!-------------slide6----------------->
                <section class="swiper-slide">
                    6
                </section>
            </div>
        </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            direction : 'vertical',
            on: {
                //滑动到最后一个slide触发
                reachEnd: function(){
                    console.log('到了最后一个slide');
                },
                //判断滑动到了哪一页
                slideChangeTransitionEnd: function(){
                    console.log(this.activeIndex);
                    if(this.activeIndex == 6){
                        $('#array').css('display','none');
                    }else{
                        $('#array').css('display','block');
                    }
                }
            }
        })         
    </script>
</body>
</html>

优点：稳定！相比上面两种，swiper在ios上滑动也没有出现晃动的问题，特别的稳定

Lililich's Blog
66Article 38Tags 13Categories