ionic之$ionicGesture手勢（大坑） - puyongsong－IT工程師數位筆記本

文章出處

　　鄙人來本公司前未用過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.html
on(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方法返回對象的一個子對象options
on()方法返回的是一個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聯系，多謝！

文章列表

不含病毒。www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds