Question

我正在为Windows手机开发应用程序，我需要实现一个滑动功能。

我跟随jquery-mobile路由以及angularjs变得凌乱，因为两者都使用url进行路由。我能够使用jquery-mobile工作。

我想在优先级上使用angularjs。有没有人开发过这种功能？

Answer 1

CemOzer他的答案就是你需要的，给你一个我的旧项目的例子。

在页面视图中：

<div ng-swipe-right="goToPage('home')" ng-swipe-left="goToPage('settings')">

重要提示：鼠标/手指的点击和释放必须在ELEMENT上！如果你只是滑动屏幕的手指，它将无法正常工作。它必须在元素上！所以没有元素的孩子。

滑动会触发我的控制器的功能：

$scope.goToPage = function (page) {
     $location.url(page); // or  $location.path(page);
};

确保index.html中包含以下依赖项：

<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

您还必须在模块中声明这些模块：

angular.module('cbosApp', [
       'ngAnimate', // THIS
       'ngTouch',// THIS
       'ngCookies',
       'ngResource',
       'ngSanitize',
       'ngRoute', // THIS
       'frapontillo.bootstrap-switch'   
])

我将视图放在一个视图容器中，以确保它与index.html

中的动画相关

<div class="view-animate-container">
     <div ng-view ></div>
</div>

然后你所需要的只是移动视觉的css：

.view-animate-container {
    position:relative;
}

.view-animate.ng-enter, .view-animate.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    overflow:visible;
    display:block;
    width:100%;
    position:absolute;
    height:200px;
    top:0;
    left:0;
    right:0;
}

.view-animate.ng-enter {
    left:100%;
}
.view-animate.ng-enter.ng-enter-active {
    left:0;
}
.view-animate.ng-leave.ng-leave-active {
    left:-100%;
}

我希望这有点清楚。

Answer 2

如果我理解正确您正在寻找滑动功能以在页面之间导航。为此，您可以使用以下方法来实现目标。

滑动事件：Angular在ng-touch模块中具有内置触控支持，您可以看到 here 。
路由：对于路由，您可以使用 ng-router 。它使您能够围绕州而不是网址组织您的应用程序。
滑动动画：此外，angular还有一个名为 ng-animate 的动画模块。您可以使用此功能在视图中输入和离开动画。

Windows手机角应用的滑动功能

2 个答案: