你的位置:首页 > 网页设计

[网页设计]ionic之$ionicGesture手势(大坑)


  鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称网站i)边学ionic边做项目。

  ionic刚踩过的坑--$ionicGesture!现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助!

  网站i对$ionicGesture的介绍如下:

  在一个元素上添加一个事件监听器。

$ionicGesture.on(eventType, callback, $element)

  在一个元素上移除一个手势事件监听器。

$ionicGesture.off(eventType, callback, $element)

  参数介绍:

  参数       类型        详情eventType      string     监听的手势事件。callback     function(e)  当手势事件发生时触发的事件。$element      element    angular元素监听的事件

  网站i这对$ionicGesture的介绍把我坑的不要不要的,.on()方法没错,.off()参数不对啊!

  这里的off()方法我按网站i的介绍做完,弄了好久都不行,后来按住alt点击$ionicGesture.off进去看源码是这样的才知道网站i介绍该方法错了。

  现整理汇总如下:

$ionicGesture服务--注册/解除手势事件监听

  注册手势事件监听函数

$ionicGesture.on(eventType, callback, $element)

on()方法返回的是一个ionic.gesture对象,可供解除监听用。

参数介绍:

  • 参数eventType是支持的事件类型;
  • 参数callback指定监听函数;
  • 参数$element是要绑定事件的jqLite元素;
  • 参数options是on方法返回对象的一个子对象options。

  解除手势事件监听函数

$ionicGesture.off(gesture,eventType,callback)

  参数介绍:

  • 参数gesture是on()方法返回的结果对象;
  • 参数eventType是支持的事件类型;
  • 参数callback是要移除的监听函数。

注意:canllback默认参数event,后面代码有提到。

  $ionicGesture服务支持的事件类型有:

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release

举个例子:

结构层:

<div>   <p>注册、解除手势事件都是按顺序,先button1在button2</p>   <p>点击bind一次button注册一次事件</p>   <button ng-click="add()">bind</button>   <p>点击unbind一次button解除一次事件</p>   <button ng-click="delete()">unbind</button><br><br>   <button id="idCardNick">idCardNick button1</button><br><br>   <button id="licenseNick">licenseNick button2</button>  </div>

  只为实现简单的效果,样式比较呵呵!

  效果:bind、unbind按钮注册、解除手势事件,都是按顺序,先button1在button2。

行为层:

  写在末尾的公用方法

    $scope.add=function(){       if($scope.data.length<2){$scope.data.push('nick');}      };      $scope.delete=function(){       $scope.data.pop();      }; 

  .on()和.off()的监听函数

  function clickFn(ev,idx){       //这里默认的arguments是event 自定义的参数idx无法获取??       console.log(arguments);       console.log(idx);//undefined       console.log($scope.idx);//这样可以获取idx对象      };

这里要注意的就是监听函数的默认参数event,我开始天真的写成下面这样
function clickFn(idx){  ……  }   

这样写坑死我啦,后来打桩console.log(idx);结果打印出来是event,我勒个去!

监听data.length动态添加删除click事件
  $scope.data=[];  var clickGesture0,clickGesture1,unbindWatch;     
  unbindWatch=$scope.$watch('data.length',function(newval,oldval){ if(newval==0){ if(clickGesture0){OffclickFn(clickGesture0);} if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==1){ clickGesture0=AddclickFn('#idCardNick',0); if(clickGesture1){OffclickFn(clickGesture1);} }else if(newval==2){ clickGesture1=AddclickFn('#licenseNick',1); }else{//不用时为了性能销毁watch unbindWatch(); } console.log(clickGesture0); });

添加监听手势函数AddclickFn这里有2中写法  

  写法一:

  function AddclickFn(selector,idx){       return $ionicGesture.on('click',function(){        console.log(arguments);        console.log(idx);//这样可以获取idx       },angular.element(document.querySelector(selector)));      };

这样写$ionicGesture.on()的监听函数callback就可以获取参数idx,但是这样写$ionicGesture.off()就不能解除callback监听函数了,所以我写成了第二种写法。

  写法二:

function AddclickFn(selector,idx){       return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});      };

  将idx存入options.idx在作为对象存入$scope.idx,这样clickFn就可以使用$scope.idx.idx,即参数idx的值。

  这里虽然写法二能实现效果,但我总感觉这样写不好,希望有大牛能给点建议,给我留言或者qq联系,多谢!

  移除手势监听函数:

 function OffclickFn(clickGesture){       $ionicGesture.off(clickGesture,'click',clickFn);   };

我把需要注意的地方都加注释了,上完整代码:

<!DOCTYPE html><html ng-app="nickApp"><head> <meta charset="utf-8" name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="lib/ionic/js/ionic.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css"></head><body ng-controller="nickCtrl">  <div>   <p>注册、解除手势事件都是按顺序,先button1在button2</p>   <p>点击bind一次button注册一次事件</p>   <button ng-click="add()">bind</button>   <p>点击unbind一次button解除一次事件</p>   <button ng-click="delete()">unbind</button><br><br>   <button id="idCardNick">idCardNick button1</button><br><br>   <button id="licenseNick">licenseNick button2</button>  </div>  <script>/* http://www.ionic.wang/js_doc-index-id-58.htmlon(eventType, callback, $element)off(eventType, callback, $element)参数      类型       详情eventType   string   监听的手势事件。callback   function(e) 当手势事件发生时触发的事件。$element    element  angular元素监听的事件。*//*//完整汇总:$ionicGesture服务--注册/解除手势事件监听:on(eventType,callback,$element,options) - 注册手势事件监听函数参数eventType是支持的事件类型;参数callback指定监听函数;参数$element是要绑定事件的jqLite元素。参数options是on方法返回对象的一个子对象optionson()方法返回的是一个ionic.gesture对象,可供解除监听用。off(gesture,eventType,callback) - 解除手势事件监听函数参数gesture是on()方法返回的结果对象,参数eventType是支持的事件类型参数callback是要移除的监听函数。$ionicGesture服务支持的事件类型有:hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release*/   angular.module('nickApp',['ionic'])    .controller('nickCtrl', ['$scope','$ionicGesture',     function ($scope,$ionicGesture){      $scope.data=[];      var clickGesture0,clickGesture1,unbindWatch;      //监听data.length动态添加删除click事件      unbindWatch=$scope.$watch('data.length',function(newval,oldval){       if(newval==0){        if(clickGesture0){OffclickFn(clickGesture0);}        if(clickGesture1){OffclickFn(clickGesture1);}       }else if(newval==1){        clickGesture0=AddclickFn('#idCardNick',0);        if(clickGesture1){OffclickFn(clickGesture1);}       }else if(newval==2){        clickGesture1=AddclickFn('#licenseNick',1);       }else{//不用时为了性能销毁watch        unbindWatch();       }       console.log(clickGesture0);      });      /*function AddclickFn(selector,idx){       return $ionicGesture.on('click',function(){        console.log(arguments);        console.log(idx);//这样可以获取idx       },angular.element(document.querySelector(selector)));      };*/      function AddclickFn(selector,idx){//将idx存入options.idx在作为对象存入$scope.idx       return $ionicGesture.on('click',clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});      };      /*      按住alt点击$ionicGesture.off进去看源码是这样的      才知道ionic.wang这网站介绍gusture方法错了      off: function(gesture, eventType, cb) {       return window.ionic.offGesture(gesture, eventType, cb);      }*/      $scope.add=function(){       if($scope.data.length<2){$scope.data.push('nick');}      };      $scope.delete=function(){       $scope.data.pop();      };      function clickFn(ev,idx){       //这里默认的arguments是event 自定义的参数idx无法获取??       console.log(arguments);       console.log(idx);//undefined       console.log($scope.idx);//这样可以获取idx对象      };      function OffclickFn(clickGesture){       $ionicGesture.off(clickGesture,'click',clickFn);      };     }]);  </script></body></html>

View Code

再唠叨下:上面写法二我总感觉不好,希望有大牛能给点建议,给我留言或者qq联系,多谢!