<!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>
