Angular-Touch庫用法示例
更新時(shí)間：2016年12月22日 14:31:54 作者：wheatmark
這篇文章主要介紹了Angular-Touch庫用法,結(jié)合觸屏滑動事件的實(shí)現(xiàn)為例分析了Angular-Touch庫的相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了Angular-Touch庫用法。分享給大家供大家參考，具體如下：
Angular-touch庫用的不多，網(wǎng)上的例子也不多。寫個(gè)觸屏滑動的事件。
先在頁面上弄個(gè)div
<div id="content" align="center" ng-app="imageApp" image-controller="">
<p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;">
<img id="show"src="assets/image/logo.jpg" />
</p>
</div>
引入兩個(gè)庫
<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script> <script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>
注冊事件
try{
angular.module('imageApp',['ngTouch'])
.directive('imageController',['$swipe',function($swipe){
return {
restrict:'EA',
link:function(scope,ele,attrs,ctrl){
var startX,startY,locked=false;
$swipe.bind(ele,{
'start':function(coords){
startX = coords.x;
startY = coords.y;
},
'move':function(coords){
var delta = coords.x - startX;
if(delta<-300 && !locked){
console.log('trun right');
}else if(delta>300 && !locked){
console.log('trun left');
}
},
'end':function(coords){
},
'cancel':function(coords){
}
});
}
}
}
]);
}catch(e){
console.error(e);
}
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
本篇文章主要介紹了詳解angular element()方法使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
angular.js + require.js構(gòu)建模塊化單頁面應(yīng)用的方法步驟
這篇文章主要給大家介紹了關(guān)于利用angular.js + require.js構(gòu)建模塊化單頁面應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
本篇文章主要介紹了angular指令筆記ng-options的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
AngularJS 模型詳細(xì)介紹及實(shí)例代碼
本文主要介紹 AngularJS模型，這里詳細(xì)介紹了AngularJS 模型中的知識點(diǎn),并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器（六）
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點(diǎn)實(shí)例($anchorScroll)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS入門教程二：在路由中傳遞參數(shù)的方法分析
這篇文章主要介紹了AngularJS在路由中傳遞參數(shù)的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)路由中傳遞參數(shù)的相關(guān)技巧,并總結(jié)了相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2017-05-05
本篇文章主要介紹了深入理解Angular中的依賴注入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
基于AngularJS實(shí)現(xiàn)iOS8自帶的計(jì)算器
這篇文章的主要內(nèi)容是使用angularjs實(shí)現(xiàn)一個(gè)計(jì)算器，是一個(gè)仿iOS8風(fēng)格的計(jì)算器，功能基本和iOS自帶的計(jì)算器是一致的。有需要的朋友們可以參考借鑒。2016-09-09