ionic

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);
     };

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

 

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

 

 

标签: ionic