Ionic Js七：手势事件

1.on-hold

长按的时间是500毫秒。
HTML 代码

<button on-hold="onHold()" class="button">长按我！</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onHold=function(){
            alert('on-hold')
        }


    }])

 

2.on-tap

这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。
HTML 代码

<button on-tap="onTap()" class="button">轻击我</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onTap=function(){
            alert('on-tap')
        }


    }])

 

3.on-double-tap

手双击屏幕事件
HTML 代码
代码


<button on-tap="onDoubleTap()" class="button">双击我</button>

 




JavaScript 代码

4.on-touch

这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。
HTML 代码
代码


<button on-tap="onTouch()" class="button">on-touch</button>

 




JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onTouch=function(){
            alert("你触发了on-touch")
        }


    }])

 

5.on-release

当用户结束触摸事件时触发。
HTML 代码
代码


<button on-tap="onRelease()" class="button">onRelease</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onRelease=function(){
            alert("你触发了onRelease")
        }


    }])

 

6.on-drag

这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
HTML 代码
代码


<button on-tap="onDrag()" class="button">onDrag</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onDrag=function(){
            console.log("onDrag")
        }


    }])

7.on-drag-up

向上拖拽。
HTML 代码
代码


<button on-tap="onDragUp()" class="button">onDragUp</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope',function($scope){

    $scope.onDragUp=function(){
        console.log("onDragUp")
    }
}])

 

8.on-drag-right

向右拖拽。
HTML 代码

<button on-tap="onDragRight()" class="button">onDragRight</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope',function($scope){
    $scope.onDragRight=function(){
        console.log("onDragRight")
    }
}])

 

9.on-drag-down

向下拖拽。
HTML 代码

<button on-tap="onDragDown()" class="button">onDragDown</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope',function($scope){
    $scope.onDragDown=function(){
        console.log("onDragDown")
    }
}])

 

10.on-drag-left

向左边拖拽。
HTML 代码

<button on-tap="onDragLeft()" class="button">onDragLeft</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){
        $scope.onDragLeft=function(){
            console.log("onDragLeft")
        }

    }])

 

11.on-swipe

指手指滑动效果，可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
HTML 代码

<button on-swipe="onSwipe()" class="button">onSwipe</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){

        $scope.onSwipe=function(){
            console.log("onSwipe")
        }
    }])

 

12.on-swipe-up

向上的手指滑动效果。
HTML 代码

<button on-swipe-up="onSwipeUp()" class="button">onSwipeUp</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){
        $scope.onSwipeUp=function(){
            console.log("onSwipeUp")
        }
    }])

 

13.on-swipe-right

向右的手指滑动效果。
HTML 代码

<button onSwipeUp="onSwipeRight()" class="button">onSwipeRight</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){
        $scope.onSwipeRight=function(){
            console.log("onSwipeRight")
        }

    }])

 

14.on-swipe-down

向下的手指滑动效果。
HTML 代码

<button onSwipeDown="onSwipeDown()" class="button">onSwipeDown</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){
        $scope.onSwipeDown=function(){
            console.log("onSwipeDown")
        }
    }])

 

13.on-swipe-left

向左的手指滑动效果。
HTML 代码

<button onSwipeUp="onSwipeLeft()" class="button">onSwipeLeft</button>

 

JavaScript 代码

angular.module('starter', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
          StatusBar.styleDefault();
        }
      });
    })

    .controller( 'actionsheetCtl',['$scope',function($scope){
        $scope.onSwipeLeft=function(){
            console.log("onSwipeLeft")
        }
    }])