ionic常用插件——分享插件

下面是效果图:
Screenshot_2016-03-09-10-25-36

1、安装插件

cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

2、测试使用

<a href="#"class="btn"onclick="window.plugins.socialsharing.share('Message only')">Share Message</a>
<a href="#"class="btn"onclick="window.plugins.socialsharing.share(null, null, 'http://www.baidu.com/img/bdlogo.gif', null)">Share Image</a>
<a href="#"class="btn"onclick="window.plugins.socialsharing.shareViaSMS('My cool message', null, function(msg) {console.log('ok: ' + msg)}, function(msg) {alert('error: ' + msg)})">Share via SMS</a>
Posted in ionic(cordova)插件 | Leave a comment

ionic常用插件——百度语音播放插件

插件下载地址:http://pan.baidu.com/s/1bosdAH5

注意:插件中默认配置的是我自己的key,如果想测试效果,请将ionic应用的config.xml里的widget中ID 设置为

id="com.byxx.test"

先看效果:

Screenshot_2016-01-25-13-04-52[1]

关键代码:

view

<div style="text-align: center">
  <button class="button button-assertive" ng-click="bdvoice()">语音测试</button>
</div>

controller

$scope.vm = {
  str: "我是一个好人,这是一个cordova百度语音插件"
}
$scope.bdvoice = function () {
  if (window.plugins.BdVoice) {
    window.plugins.BdVoice.speakout($scope.vm.str, function (success) {

    }, function (fail) {

    });
  }
}

这是插件代码截图:

22

下面来看使用方法:

下载完插件后

1、修改bdvoice\src\android\Keys.java下面的App ID、API Key、Secret Key。获取key请移步:http://yuyin.baidu.com/app

2、安装。在项目下打开cmd,执行 cordova plugin add D:\WebStormWorkSpace\ionic\plugin\bdvoice(这是你的插件下载后存放地址)

3、调用。

if (window.plugins.BdVoice) {
    window.plugins.BdVoice.speakout($scope.vm.str, function (success) {

    }, function (fail) {

    });
  }

 

Posted in ionic(cordova)插件 | 3 Comments

ionic常用插件——支付宝支付插件

使用ionic开发的一大问题就是有些需要调用原生的东西,还是需要自己去动手编写插件,关于插件的开发,可以参考我的http://www.ionic.ren/2015/11/26/ionic%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD%E4%B8%89-%E7%BC%96%E5%86%99cordova%E6%8F%92%E4%BB%B6plugin/

下面我将介绍如何开发出支付宝支付插件:

先看下图效果:

Screenshot_2016-01-20-10-50-48[1] Screenshot_2016-01-20-10-54-25[1] Screenshot_2016-01-20-10-54-36[1]

1、获取支付宝的PID和Key

这里省略不说,需要技术支持的联系我。

2、客户端cordova插件开发

这里以Android版为例说明,IOS的大同小异

  1. 在电脑上创建一个文件夹(这里选择D盘,命名为IonicAlipay)
  2. 在IonicAlipay中创建src、www、plugin.xml 两个文件夹及一个xml描述文件
  3. 在src文件夹中创建一个android文件夹(里面再创建一个lib文件夹来存储支付宝的包文件),www文件夹中创建ionicalipay.js文件。

333

以上步骤可以使用pluginman来快捷实现,这里我就不说了。

下面就是插件开发的核心了

1、下载支付宝的demo
下载地址http://aopsdkdownload.cn-hangzhou.alipay-pub.aliyun-inc.com/demo/WS_MOBILE_PAY_SDK_BASE.zip?spm=0.0.0.0.MZesZy&file=WS_MOBILE_PAY_SDK_BASE.zip

2、复制支付宝的jar包(支付宝钱包支付接口开发包2.0标准版(201501118)\DEMO\客户端demo\alipay-sdk-common)到IonicAlipay\src\android\lib文件目录下。我这里使用的是alipaySdk-20151112.jar

3、复制支付宝Demo中的几个公共类(SignUtils.java、PayResult.java、Base64.java)到IonicAlipay\src\android目录下并修改对应的package名称

4、修改Demo中PayDemoActivity.java文件的代码,主要是让其继承CordovaPlugin实现     execute方法,便于js的调用。
这里的调用代码主要是以下一段:具体业务逻辑代码这里就不啰嗦了,可以自己修改。

Runnable payRunnable = new Runnable() {

                @Override
                public void run() {
                    PayTask alipay = new PayTask(cordova.getActivity());
                    String result = alipay.pay(payInfo);

                    Log.i(TAG, "result = " + result);
                    callbackContext.success(result); // Thread-safe.

                    Message msg = new Message();
                    msg.what = SDK_PAY_FLAG;
                    msg.obj = result;
                    mHandler.sendMessage(msg);
                }
            };

5、编写IonicAlipay\plugin.xml文件。
这里主要要注意如下代码

<config-file target="AndroidManifest.xml" parent="/manifest/application">
            <activity
                android:name="com.alipay.sdk.app.H5PayActivity"
                android:configChanges="orientation|keyboardHidden|navigation"
                android:exported="false"
                android:screenOrientation="behind" >
            </activity>
            <activity
                 android:name="com.alipay.sdk.auth.AuthActivity"
                 android:configChanges="orientation|keyboardHidden|navigation"
                 android:exported="false"
                 android:screenOrientation="behind" >
            </activity>
        </config-file>

最后我们得到以下几个调用支付宝接口的文件:

点击下载:android

这里主要说明下Keys.java和IonicAlipay.java两个文件,其他的不需要动

Keys.java:这个很简单主要是放了四个静态常量,按照注释说明填上即可。

IonicAlipay.java:这里主要注意自定义参数及支付成功回调地址的修改。自定义参数:可以通过url拼接上去,支付宝回调地址:支付宝在支付成功后会回调你传给它的URL地址,反馈回调结果给你的服务器,虽然客户端也有返回,但不能作为支付成功的依据。

下面看下js文件:

点击下载:ionicalipay

这个文件很简单,就是定义了一个IonicAlipay的对象在window.plugins上。

最后,就是插件的描述文件plugin.xml。

点击下载plugin

至此,整个插件就算完结了。

 

 

Posted in ionic(cordova)插件 | 16 Comments

ionic常用插件——ngCordova( $cordovaSMS发送短信)

安装:

cordova plugin add https://github.com/cordova-sms/cordova-sms-plugin.git

使用:

<div class="col col-25 whiteFore redBackGround" style="padding: 0px;text-align: center;line-height:1"
     ng-click="sendMsg(18680470232)">
  <img ng-src="img/shop/dx.png" height="20px" width="20px" style="margin-top:0.3rem"><br>
  短信
</div>

方法:

$scope.sendMsg = function (mobilePhone) {
  console.log("发送消息:" + mobilePhone);
  var options = {
    replaceLineBreaks: false, // true to replace \n by a new line, false by default
    android: {
      intent: 'INTENT'  // send SMS with the native android SMS messaging
      //intent: '' // send SMS without open any other app
    }
  };
  $cordovaSms.send(mobilePhone, '内容', options)
}

效果图:

Screenshot_2016-01-19-11-13-01[1]

参考资料:
http://ngcordova.com/docs/plugins/sms/

Posted in ionic(cordova)插件 | Leave a comment

ionic实用功能(八)——点击拨打电话功能

在ionic的应用中,经常会使用到点击直接拨打电话功能,这个在ionic中是如下实现的:

调用部分:

<div class="col col-25 whiteFore" style="padding: 0px;text-align: center;line-height:1;background: #ff9402;"
     ng-click="callPhone(18680470232)">
  <img ng-src="img/shop/tel.png" height="20px" width="20px" style="margin-top:0.3rem"><br>
  电话
</div>

方法:

$scope.callPhone = function (mobilePhone) {
  console.log("拨打:" + mobilePhone);
  $window.location.href = "tel:" + mobilePhone;
};

效果如下:

Screenshot_2016-01-15-09-08-39

Screenshot_2016-01-15-09-08-47

注意:需要在ionic项目的config文件中添加如下代码

<access launch-external=”yes” origin=”tel:*”/>

短信发送功能参照此处:

http://www.ionic.ren/2016/01/19/ionic%E5%B8%B8%E7%94%A8%E6%8F%92%E4%BB%B6-ngcordova-cordovasms%E5%8F%91%E9%80%81%E7%9F%AD%E4%BF%A1/

Posted in 实用功能 | 2 Comments

ionic常用插件——ngCordova($cordovaNetwork网络状态监控插件)

主要用来监控网络的连接状态插件,使用方法:

安装插件:

cordova plugin add org.apache.cordova.network-information

在app.js的run方法中加入以下代码:

//检查网络状态
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
  $cordovaToast.showShortBottom('已通过' + $cordovaNetwork.getNetwork() + '连接至网络!');
});
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function (event, networkState) {
  //提醒用户的网络异常
  $cordovaToast.showShortBottom('网络连接异常,请检查网络!');
});

效果如下:

Screenshot_2016-01-15-08-57-15

Screenshot_2016-01-15-08-55-28

Posted in ionic(cordova)插件 | Leave a comment

ionic实用功能(七)——tab项目选中颜色的自定义

可以修改ioniccss的样式,但那样比较麻烦,建议在自己的css样式里面添加:

ion-tabs.tabs-color-active-positive .tab-item.tab-item-active, ion-tabs.tabs-color-active-positive .tab-item.active, ion-tabs.tabs-color-active-positive .tab-item.activated{
  color: red;
}

22226

Posted in 实用功能 | Leave a comment

ionic之AngularJS(十一)——工具方法

$ionicPlatform

一个angular抽象的ionic.Platform

用来检测当前的平台,以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。

方法

onHardwareBackButton(callback)

一些平台有硬件的后退按钮,因此可以用这种方法绑定到它。

参数 类型 详情
callback function 当该事件发生时,触发回调函数。

offHardwareBackButton(callback)

移除一个后退按钮的监听事件。

参数 类型 详情
callback function 最初绑定的监视器函数。

registerBackButtonAction(callback, priority, [actionId])

注册一个硬件后退按钮动作。当点击按钮时,只有一个动作会执行,因此该方法决定了注册的后退按钮动作具有最高的优先级。

例如,如果一个动作表已经显示,后退按钮应该关闭这个动作表,但是它不应该还能返回一个页面视图或关闭一个打开的模型。

参数 类型 详情
callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级。
priority number 仅最高优先级的会执行。
actionId

(可选)
* 该id指定这个动作。默认:一个随机且唯一的id。
  • 返回: function 一个被触发的函数,将会注销该后退按钮动作。

ready([callback])

一旦设备就绪,则触发一个回调函数,或如果该设备已经就绪,则立即调用。

参数 类型 详情
callback

(可选)
function= 触发的函数。
  • 返回: promise 当设备就绪后,就会解决一个 promise。

ionic.Platform

方法

ready(callback)

设备就绪后触发一个回调函数,或如果设备已经就绪理解触发。该方法可以随处运行而无需通过任何附加方法封装。当一个app包含一个web视图(Cordova),当设备就绪后它将会触发回调函数。如果该app包含一个web浏览器,它会在window.load之后触发回调。

参数 类型 详情
callback function 调用的函数

device()

返回当前设备(通过cordova提供)。

  • 返回: 对象设备对象。

isWebView()

  • 返回: boolean验证我们是否附带web视图运行(比如Cordova)。

isIPad()

  • 返回: boolean 是否在iPad上运行。

isIOS()

  • 返回: boolean 是否在iOS上运行。

isAndroid()

  • 返回: boolean 是否在Android上运行。

isWindowsPhone()

  • 返回: boolean 是否在Windows手机上运行。

platform()

  • 返回: string 当前平台的名字。

version()

  • 返回: string 当前设备平台的版本。

exitApp()

退出app。

showStatusBar(shouldShow)

显示或隐藏设备状态栏(用Cordova)。

参数 类型 详情
shouldShow boolean 是否显示状态栏。

fullScreen([showFullScreen], [showStatusBar])

设置app是否全屏(用Cordova)。

参数 类型 详情
showFullScreen

(可选)
boolean 是否设置app全屏。默认为true。
showStatusBar

(可选)
boolean 是否显示设备状态栏。默认为false。

属性

  • boolean isReady

    设备是否就绪。

  • boolean isFullScreen

    设备是否全屏。

  • Array(string) platforms

    一个所有平台的数组。

  • string grade

    当前平台是什么级别的。

ionic.DomUtil

方法

requestAnimationFrame(callback)(别号: ionic.requestAnimationFrame)

触发requestAnimationFrame,或一个polyfill如果不可用。

参数 类型 详情
callback function 触发下一个框架时,调用该函数。

animationFrameThrottle(callback)(别号: ionic.animationFrameThrottle)

当给定一个回调函数时,如果在框架动画之间,被调用100次,添加 Throttle 将会使它只运行最后的100次调用。

参数 类型 详情
callback function 一个函数会被requestAnimationFrame终止。
  • 返回: function 一个函数会传递一个回调。回调传递接收的内容返回给被调用的函数。

getPositionInParent(element)

获取一个元素在容器内滚动的偏移。

参数 类型 详情
element DOMElement 找到便宜的元素。
  • 返回: object一个位置对象具有如下属性:
    • {number} left 元素的左偏移。
    • {number} top 元素的上偏移。

ready(callback)

当DOM就绪后调用一个函数,或如果它已经就行则立即调用。

参数 类型 详情
callback function 被掉用的函数。

getTextBounds(textNode)

获取一个矩形占用的textNode给定的边界。

参数 类型 详情
textNode DOMElement textNode查找的边界。
  • 返回: object 一个对象占据边界的节点。属性:
    • {number} left textNode左侧位置。
    • {number} right textNode右侧位置。
    • {number} top textNode上位置。
    • {number} bottom textNode下位置。
    • {number} width textNode的宽度。
    • {number} height textNode的高度。

getChildIndex(element, type)

在给定的元素的指定类型内获取第一个子节点的索引。

参数 类型 详情
element DOMElement 找到索引的元素。
type string 与子元素对应的节点名称。
  • 返回: number 索引,或-1,匹配类型的子节点名称。

getParentWithClass(element, className)

参数 类型 详情
element DOMElement
className string
  • 返回: DOMElement 匹配最近的父元素类名,或为空。

getParentWithClass(element, className)

参数 类型 详情
element DOMElement
className string
  • 返回: DOMElement 匹配最近的父元素或自身,或为空。

rectContains(x, y, x1, y1, x2, y2)

参数 类型 详情
x number
y number
x1 number
y1 number
x2 number
y2 number
  • 返回: boolean 由{x1,y1,x2,y2}定义的矩形内部是否与{x,y}匹配。

ionic.EventController

方法

trigger(eventType, data, [bubbles], [cancelable])(别号: ionic.trigger)

参数 类型 详情
eventType string 触发的事件。
data object 事件的数据。提示: 通过{target: targetElement}传递。
bubbles

(可选)
boolean 事件是否在DOM中冒泡。
cancelable

(可选)
boolean 事件是否能被取消。

on(type, callback, element)(别号: ionic.on)

监听一个元素上的事件。

参数 类型 详情
type string 监听的事件。
callback function 触发监听器。
element DOMElement 监听该事件的元素。

off(type, callback, element)(别号: ionic.off)

移除一个事件的监听器。

参数 类型 详情
type string
callback function
element DOMElement

onGesture(eventType, callback, element)(别号: ionic.onGesture)

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

可用的事件类型(来自hammer.js):

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

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

offGesture(eventType, callback, element)(别号: ionic.offGesture)

移除一个元素上的事件监听器。

参数 类型 详情
eventType string 手势事件
callback function(e) 之前添加的监听器。
element DOMElement 被监听的元素。

keyboard

在Android 和 iOS中, Ionic会试图阻止键盘的模糊输入以及聚焦元素,当在视图中滚动出现的时候。为了这项工作,任何可以获取焦点的元素必须在一个滚动视图或一个类似于带有滚动视图的Content指令内。

在获取焦点时,它会试图阻止原生的滚动溢出,这可能会导致布局问题,比如将header挤到上面,并超出视野。

键盘修复可以和Ionic键盘插件最好的协同工作,尽管没有它,Ionic键盘插件也会执行良好。然而,如果你使用Cordova的话,就没有理由用该插件。

当键盘显示的时候隐藏

当键盘被打开的时候,要隐藏一个元素,添加hide-on-keyboard-open类。

<div class="hide-on-keyboard-open">
  <div id="google-map"></div>
</div>

插件用法

使用该插件的用法可以参考 https://github.com/driftyco/ionic-plugins-keyboard


Android平台注意事项

  • 如果你的app全屏运行,即config.xml文件内有<preference name="Fullscreen" value="true" />,你需要手动设置ionic.Platform.isFullScreen = true
  • 你可以配置web视图的行为,通过设置android:windowSoftInputModeadjustPan来显示键盘,在你app中AndroidManifest.xmladjustResizeadjustNothing行为。 adjustResize为Ionic推荐设置,但是如果处于一些原因你使用了adjustPan,那么你需要设置ionic.Platform.isFullScreen = true
    <activity android:windowSoftInputMode="adjustResize">
    

iOS平台注意事项

  • 如果在input获取焦点时,你app的内容(包含header)被挤到上面或视图以外,就需要尝试设置cordova.plugins.Keyboard.disableScroll(true)。这并不会在Ionic滚动视图中禁用滚动,相反,它会禁用原生的滚动溢出,当自动发生input获取焦点在键盘之后时。

keyboard-attach

keyboard-attach是一个属性指令,在键盘显示时,它会导致一个元素悬浮在键盘上方。目前仅支持ion-footer-bar指令。

注意

  • 该指令依赖Ionic键盘插件
  • Android设备未全屏模式中,即,在你的config.xml文件里设置了<preference name="Fullscreen" value="true" />,该指令是不必要的,因为她默认的行为。
  • 在iOS中,在你的footer中有一个input,你需要设置cordova.plugins.Keyboard.disableScroll(true)

用法

 <ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
   <h1 class="title">标题!</h1>
 </ion-footer-bar>
Posted in ionic之JS | Leave a comment

使用ionic开发(五)——localStorage的使用

首先编写一个storage的指令,代码如下:

/**
 * localStorage使用
 */
utilCtrlModule.factory('Storage', function () {
    return {
        set: function (key, data) {
            return window.localStorage.setItem(key, window.JSON.stringify(data));
        },
        get: function (key) {

            return window.JSON.parse(window.localStorage.getItem(key));
        },
        remove: function (key) {
            return window.localStorage.removeItem(key);
        }
    };
});

接下来就可以轻松使用localStorage了,创建模块时依赖注入Storage,使用时即可调用Storage.set(key, data)、Storage.(key)、Storage.remove(key)方法来操纵localStorage了。

Posted in 学习笔记 | Leave a comment

ionic之AngularJS(十)——手势事件

长按 : on-hold

在屏幕同一位置按住超过500ms,将触发on-hold事件:

 

你可以在任何元素上使用这个指令挂接监听函数:

  1. <any on-hold=“…”></any>

示例代码:

<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”  on-hold=”show_delete();”>
<h1 class=”title”>on-hold</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item>
{{item}}
<ion-delete-button class=”ion-minus-circled”></ion-delete-button>
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class=”bar-positive”></ion-footer-bar>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicListDelegate) {
$scope.items=[“China”,”Japan”,”India”,”Russian”];
$scope.show_delete = function(){
$ionicListDelegate.showDelete(true);
};
});

敲击 : on-tap

在屏幕上快速点击一次(停留时间不超过250ms),将触发on-tap事件:

 

可以在任何元素上使用这个指令挂接事件监听函数:

  1. <any on-tap=“…”></any>

示例代码:

<head>
<meta name=”viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height”>
<script src=”ionic.bundle.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”ionic.min.css”>
</head>
<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-tap</h1>
</ion-header-bar>
<ion-content>
<ion-list ng-repeat=”item in items”>
<ion-item on-tap=”show(item);”>
{{item}}
<ion-reorder-button class=”ion-navicon”></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope, $ionicPopup) {
$scope.items=[“England”,”Japan”,”India”,”Russian”];
$scope.show = function(item){
$ionicPopup.alert({
title : “警告!”,
template : “为什么要敲 “+ item + “?”
});
};
});

双击 : on-double-tap

在屏幕上快速敲击两次,将触发on-double-tap事件:

 

可以在任何元素上使用这个指令挂接事件监听函数:

  1. <any on-double-tap=“…”></any>

示例代码:

<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” on-double-tap=”title=’I am double tapped!'”>
<h1 class=”title”>{{title}}</h1>
</ion-header-bar>
<ion-content>
<p ng-include=”‘txt/xiyouji.txt'”></p>
</ion-content>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
$scope.title = “on-double-tap”;
});

按下/松开 on-touch/on-release

在屏幕上按下手指或鼠标键时,会立即触发on-touch事件;当手指抬起或鼠标键松开时, 会立即触发on-release事件。

可以在任何元素上挂接响应的事件监听函数:

  1. <any on-touch=“…” on-release=“…”></any>

示例代码:

<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive” ng-class=”[style]”
on-touch=”style=’bar-assertive'” on-release=”style=’bar-positive'”>
<h1 class=”title”>on-touche/on-release</h1>
</ion-header-bar>
<ion-content>
<img src=”img/0021.png”>
</ion-content>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
});

拖拽 : on-drag

在屏幕上按住并移动时,触发on-drag拖拽事件:

 

根据运动方向的不同,可以细分为以下几种事件:

  • on-drag – 向所有方向拖动时都触发此事件
  • on-drag-up – 向上拖动时触发此事件
  • on-drag-down – 向下拖动时触发此事件
  • on-drag-left – 向左拖动时触发此事件
  • on-drag-right – 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数:

  1. <any on-drag=“…”></any>

示例代码:

<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>on-drag</h1>
</ion-header-bar>
<div class=”scroll-content has-header padding”>
<img src=”img/baymax.png” on-touch=”onTouch($event)” on-drag=”onDrag($event);”>
</div>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope) {
var ox,oy;
$scope.onTouch = function($event){
ox = $event.target.offsetLeft;
oy = $event.target.offsetTop;
};
$scope.onDrag = function($event){
var el = $event.target,
dx = $event.gesture.deltaX,
dy = $event.gesture.deltaY;
el.style.left = ox + dx + “px”;
el.style.top = oy + dy + “px”;
};
});

划动 : on-swipe

在屏幕上按住并快速拖动时,将触发on-swipe划动事件:

 

根据划动方向的不同,可细分为以下指令:

  • on-swipe – 向任何方向的划动都触发事件
  • on-swipe-up – 向上划动时触发事件
  • on-swipe-down – 向下划动时触发事件
  • on-swipe-left – 向左划动时触发事件
  • on-swipe-right – 向右划动时触发事件

可以在任何元素上使用这些指令挂接事件监听函数:

  1. <any on-swipe=“…”></any>

示例代码:

<body ng-controller=”ezCtrl”>
<div class=”scroll-content padding”
on-swipe-up=”onSwipeUp()”
on-swipe-down=”onSwipeDown()”
on-swipe-left=”onSwipeLeft()”
on-swipe-right=”onSwipeRight()”>
<p class=”padding”>按住鼠标快速划!</p>
<i class=”icon {{icon}}”></i>
</div>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope){
$scope.icon=”ion-arrow-expand”;
$scope.onSwipeUp = function(){
$scope.icon=”ion-arrow-up-a”;
};
$scope.onSwipeDown = function(){
$scope.icon=”ion-arrow-down-a”;
};
$scope.onSwipeLeft = function(){
$scope.icon=”ion-arrow-left-a”;
};
$scope.onSwipeRight = function(){
$scope.icon=”ion-arrow-right-a”;
};
});

脚本接口 : $ionicGesture

除了使用之前介绍的特定指令实现手势事件的监听,也可以使用$ionicGesture服务 注册/解除手势事件监听:

  • on(eventType,callback,$element,options) – 注册手势事件监听函数

参数eventType是支持的事件类型,参看下面介绍;参数callback指定监听函数; 参数$element是要绑定事件的jqLite元素。

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

  • off(gesture,eventType,callback) – 解除手势事件监听函数

参数gesture是on()方法返回的结果对象,参数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

示例代码:

<body  ng-controller=”ezCtrl”>
<ion-header-bar class=”bar-positive”>
<h1 class=”title”>$ionicGesture</h1>
</ion-header-bar>
<ion-content class=”padding”>
<button class=”button” id=”test”>test</button>
</ion-content>
</body>

js:

angular.module(“ezApp”,[“ionic”])
.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {
var el = document.querySelector(“#test”);
$ionicGesture.on(“tap”,function(){
$ionicPopup.alert({
title : “提醒”,
template : “这个监听是用$ionicGesture服务注册的!”
})
},angular.element(el));
});

 

Posted in ionic之JS | Leave a comment