本文實例講述了Angular-Touch庫用法。分享給大家供大家參考,具體如下:
Angular-touch庫用的不多,網上的例子也不多。寫個觸屏滑動的事件。
先在頁面上弄個div
<div id="content" align="center" ng-app="imageApp" image-controller=""> <p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;"> <img id="show"src="assets/image/logo.jpg" /> </p></div>
引入兩個庫
<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script><script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>
注冊事件
try{ angular.module('imageApp',['ngTouch']) .directive('imageController',['$swipe',function($swipe){ return { restrict:'EA', link:function(scope,ele,attrs,ctrl){ var startX,startY,locked=false; $swipe.bind(ele,{ 'start':function(coords){ startX = coords.x; startY = coords.y; }, 'move':function(coords){ var delta = coords.x - startX; if(delta<-300 && !locked){ console.log('trun right'); }else if(delta>300 && !locked){ console.log('trun left'); } }, 'end':function(coords){ }, 'cancel':function(coords){ } }); } } } ]);}catch(e){ console.error(e);}
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答