Touch库用法示例

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

先在页面上弄个div

<div ng-app="imageApp" image-controller=""> <p> <imgsrc="assets/image/logo.jpg" /> </p> </div>

引入两个库

<script type="text/javascript" src="https://www.jb51.net/js/angular/1.4.6/angular.min.js" ></script> <script type="text/javascript" src="https://www.jb51.net/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); }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjsxd.html