swiper 实现滑动解锁
最近项目中有这样一个需求，研究了两种写法一个原生，一个使用框架
原生写法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/huapin.css" /> <!-- <link rel="stylesheet" href="css/swiper.min.css" />--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> </head> <body> <div class="page2"> <div class="silder_bg"> <span>滑动滑动</span> <!--滑动的白点--> <img src="images/1closeLight.png" class="p2_bg1" /> //充当一个提示过度的效果 <!--手滑动关闭图--> <img src="images/2closeBar.png" id='silder' class="p2_bg2"/> </div> </div> <div class="page3"> </div> </body> <script src="js/zepto.js"></script> <script> document.getElementById('silder').addEventListener('touchmove',function(event){ //使用touchmove监听滑动 event.preventDefault(); var el = event.target; var touch = event.touches[0]; var curX = touch.pageX - this.offsetLeft - 73; if(curX <= 0) return; if(curX > 224){
//符合条件需要执行的事件 $(".page2").hide(); $(".page3").show(); setTimeout(function(){ p2show() },2000); } el.style.webkitTransform = 'translateX(' + curX + 'px)';//使其在x轴位移 },false); document.getElementById('silder').addEventListener('touchend', function(event) { //使用touchend监听滑动结束 this.style.webkitTransition = '-webkit-transform 0.3s ease-in'; this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false ); this.style.webkitTransform = 'translateX(0px)'; }, false); </script> </html>
huapin.css:
*{ border: 0; margin: 0; overflow: hidden; } html,body{ width: 100%; height: 100%; } .page2{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .page2>.bg2{ position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: #000000; opacity: 0.6; } .silder_bg{ width: 78vw; height: 10vh; position: absolute; top:5vh; left: 0; right: 0; margin: 0 auto; z-index:200; background-color: #F2F2F2; border-radius: 6vh; } .p2_bg1{ width: 10vh; height: 10vh; position: absolute; top:0; left: 20vw; right: 0; z-index:400; animation: light 3s linear infinite; -webkit-animation:light 3s linear infinite; } /*滑动css3动画*/ @keyframes light{ from{left:12vw;} to{left:60vw ;} } @-webkit-keyframes light{ from{left:10vw;opacity: 0.4;} to{left:55vw ;opacity: 0.4;} } .p2_bg2{ width: 10vh; height: 10vh; position: absolute; top:0; left: 0; right: 0; z-index:200; } .silder_bg span{ width: 78vw; height: 5vh; position: absolute; top:3vh; left: 4vw; right: 0; z-index:200; font-family: "微软雅黑"; font-size:14px ; text-align: center; }
以上是原生的写法，还可以使用jq的拖拽（draggable）这个方法
下面说下使用swiper的写法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Swiper Playground</title> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/huapin.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <style> html, body { position: relative; height: 100%; } body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; z-index: 300; } img { width: 100%; } .swiper-slide { z-index: 300; } .p2_bg { width: 10vh; height: 10vh; z-index: 300; } </style> </head> <body>
//html布局同上面，只是加了个swiper-container容器 <div class="silder_bg"> <span>滑动滑动</span> <!--滑动的白点--> <img src="images/1closeLight.png" class="p2_bg1" /> <!--手滑动关闭图--> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> //去掉swiper.min.css对swiper-slide的默认样式 <img src="images/2closeBar.png" class="p2_bg" /> </div> </div> </div> </div> <script src="js/zpto.js"></script> <script src="js/swiper.min.js"></script> <script>
简单思路：滑动swiper时监听滑动距离判断条件即可 var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', freeMode: true, on: { touchMove: function() { // alert(swiper.translate) if(swiper.translate > 130) { $(".silder_bg").fadeOut(500) } }, }, }); </script> </body> </html>
以上两种写法，原生的实现起来互动的更加快速，swiper滑动的相对有弹性一点，所要监听的距离更短，也可实现效果
