HTML原生実現プルダウンかっこいい新とスライド方向判断
6914 ワード
最近、Hybridアプリケーションを学習する際には、シミュレーションインタフェースが左右にスライドして更新しようとするニーズと、オリジナルアプリケーションをシミュレートするドロップダウン・リフレッシュとアップ・アップ・レコードのニーズがあります.現在、サードパーティのフレームワークには対応する機能が提供されていますが、しかし、振り回されがちな私(PS:他人が作ったものを使って一つの道具の使い方を学んだだけで、車輪を使っている人は車輪を作っている人の楽しさを実感しにくい)として、自分で自分の判断方法を書いてみました.ざらざらしていますが、基本的にはスライド方向を正確に判断したり、プルダウンリフレッシュを真似したりすることができます.さらに多くの機能が拡張されます.直接コード:
上のコード例ではjQueryライブラリを使用していますが、最も重要なのはメソッドcomputeOrientationメソッドで使用される数学式で、jQueryを使用しなくても判断できます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Juger</title>
</head>
<body>
<div id="context" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #afe3bf;">
</div>
<script type="text/javascript" src="js/lib/jquery-1.12.3.js"></script>
<script> $(function (){ var startX, startY, endX, endY, criteria = 50; $('#context').on('touchstart', function touchStartHandler(evt) { var originEvent, firstElement; originEvent = evt.originalEvent; firstElement = originEvent.touches[0]; startX = firstElement.screenX; startY = firstElement.screenY; }); $('#context').on('touchmove', function touchEndHandler(evt) { var originEvent, firstElement, orientation, distance; originEvent = evt.originalEvent; firstElement = originEvent.touches[0]; endX = firstElement.screenX; endY = firstElement.screenY; orientation = computeOrientation(startX - endX, startY - endY); distance = computeDistance(startY, endY); if (orientation === 0){ console.log(distance); $('#context').css({ transform: 'translate(0, ' + distance + 'px)' }); } }); $('#context').on('touchend', function touchEndHandler(evt) { computeOrientation(startX - endX, startY - endY); $('#context').css({ transform: 'translate(0, 0)' }); }); function computeOrientation(x, y){ //orientation : 0 -- top 1 -- right 2 --bottom 3 -- left return Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4 ; } function getOrientation(x, y){ var missdistance, orientation; missdistance = computeMisdistance(x, y); if ( missdistance > criteria) { orientation = computeOrientation(x, y); } else { // not vildate touch orientation = -1; } console.log(missdistance, orientation); return orientation; } function computeMisdistance(x, y){ if (x === 0){ return Math.abs(y); } if (y === 0){ return Math.abs(x); } return Math.round(Math.sqrt(Math.abs(x * x) + Math.abs(y * y))); } function computeDistance(start, end){ return Math.abs(start - Math.abs(end)); } }); </script>
</body>
</html>上のコード例ではjQueryライブラリを使用していますが、最も重要なのはメソッドcomputeOrientationメソッドで使用される数学式で、jQueryを使用しなくても判断できます.