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(), $(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
<!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
<!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上滑动也没有出现晃动的问题，特别的稳定
【注意】
swiper在新版开发者工具上滑动不能切换页面，换成旧版的就可以，比如，