hammer实现手机滑动条
Posted 150536fbb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了hammer实现手机滑动条相关的知识，希望对你有一定的参考价值。
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>手机滑动条</title> <link rel="stylesheet" href="css/amazeui.min.css"> <link rel="stylesheet" href="css/swiper-3.3.1.min.css"> <link rel="stylesheet" href="css/wx.css"> </head> <body> <div class="wx-handle-main"> <div class="am-g"> <div class="am-u-sm-6"> <p class="wx-basics-launch-name">申请人</p> </div> <div class="am-u-sm-6 wx-basics-launch-select"> 流程名称 </div> </div> <div class="wx-basics-handel-modular am-cf"> <div class="wx-basics-handel-modular-checkbox"> <label class="am-checkbox am-success"> <input type="checkbox" value="" data-am-ucheck class="userid"> </label> </div> <div class="wx-basics-handel-modular-main"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="javascript:;" class="wx-basics-handel-modular-a"> <div class="am-g wx-basics-handel-introduce"> <div class="am-u-sm-3 wx-basics-handel-introduce-user"> <img src="images/user-img.png"> </div> <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0"> <p>李悠纯<span>10分钟前</span></p> <p class="am-text-truncate">由于感冒了，需要请假休息一天！</p> </div> <div class="am-u-sm-3 wx-basics-handel-introduce-state"> 请假 </div> </div> </a> </div> <div class="swiper-slide wx-basics-handel-introduce-span"> <a href="javascript:;">不通过</a> <a href="javascript:;">通过</a> </div> </div> </div> </div> </div> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <!--<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>--> <script src="js/hammer.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var oCon = document.querySelector(".swiper-container"); var oShow = document.querySelector(".wx-basics-handel-modular-main"); var oHid = document.querySelector(".wx-basics-handel-introduce-span"); var hammer = new Hammer(oCon); hammer.on("panstart", function(e) { hammer.on("panleft", function(e) { oCon.style.transition = "-webkit-transform 500ms ease-out"; oCon.style.webkitTransform = "translate(" + -oHid.offsetWidth + "px,0px) scale(1) translateZ(0px)"; hammer.on("panright", function(e) { console.log(2); oCon.style.transition = "-webkit-transform 500ms ease-out"; oCon.style.webkitTransform = "translate(" + 0 + "px,0px) scale(1) translateZ(0px)"; }); }); }); </script> </body> </html>
以上是关于hammer实现手机滑动条的主要内容，如果未能解决你的问题，请参考以下文章
ngFor 与 Angular 7 中的 Hammer JS 滑动功能