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

你可能感兴趣的:(JavaScript)