Angular-Touch库使用

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

先在页面上弄个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>

引入两个库

    <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);
        }
  • 9
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值