Question

我正在尝试创建一个具有前向和后向导航的简单应用程序。这个想法是 - 当前进时，页面必须向左滑动，而对于向后导航，它应该向右滑动。我正在使用ng enter和ng视图概念。但是，当用户点击后退按钮时，页面必须向右滑动。

以下是index.html页面的代码

 <!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">


    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="js/angular.js"></script>
    <script src="js/angular-animate.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>

</head>

<!-- apply our angular app to our site -->
<body ng-app="routerApp" ng-controller="LoginModalCtrl">

    <div class="page {{slide}}" ui-view autoscroll="false"></div>

</body>
</html>

这是第一个州的代码

语言提示

登入

第二州/页面的代码 - page-landing.html

<div class="container-fluid" id="landing_outerdiv">
    <div class="row" id="landing_innerdiv1" style="background-color:white">
        <div id="navdiv" class="col-xs-12 col-xs-offset-0 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2" style="text-align:center;">
            <p ><a ng-click="back()"><span class="glyphicon glyphicon-chevron-left" style="float:left;"></span></a></p>
        </div>
    </div>
</div>

app.js的代码

var routerApp = angular.module（＆＃39; routerApp＆＃39;，[＆＃39; ui.router＆＃39;，＆＃39; ngAnimate＆＃39;]）;

routerApp.config（function（$ stateProvider，$ urlRouterProvider）{

$urlRouterProvider.otherwise("/home");
$stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: "/home",
        templateUrl: "page-login.html",
        controller: 'formController'
    })
    .state('landing', {
        url: "/landing",
        templateUrl: "page-landing.html",
        controller: function($scope, $http){    
        $http.get('json/data1.json').success (function(data){
            $scope.heading = data[0].heading;
            $scope.categories = data[0].categories;
      });

      }

    })

}）;

routerApp.controller（＆＃39; formController＆＃39;，function（$ scope，$ state）{

// function to process the form
$scope.processForm = function(EmpId, Password) {
    alert('awesome!'+Password);
    $state.go('landing');
};

}）;

routerApp.run（function（$ rootScope，$ window）{ $ rootScope.slide =＆＃39;向左滑动＆＃39 ;;

});

最后，style.css

.page.ng-leave  { z-index:9999; }
.page.ng-enter  { z-index:8888; }



.slide-left.ng-enter,  
.slide-left.ng-leave,  
.slide-right.ng-enter,  
.slide-right.ng-leave{  
    position: absolute;  
    top: 0; right: 0; bottom: 0; left: 0;    
    -ms-transition: 1.25s ease-in-out;  
    -webkit-transition: 1.25s ease-in-out;  
    transition:  1.25s ease-in-out;
}  
.slide-left.ng-enter {  
    z-index: 101;  
    -webkit-transform: translateX(100%);  
    transform: translateX(100%);  
}  
.slide-left.ng-enter.ng-enter-active {  
    -webkit-transform: translateX(0);  
    transform: translateX(0);  
}  
.slide-left.ng-leave {  
    z-index: 100;  
    -webkit-transform: translateX(0);  
    transform: translateX(0);  
}  
.slide-left.ng-leave.ng-leave-active {  
    -webkit-transform: translateX(-100%);  
    transform: translateX(-100%);  
}  
.slide-right.ng-enter {  
    z-index: 100;  
    -webkit-transform: translateX(-100%);  
    transform: translateX(-100%);  
}  
.slide-right.ng-enter.ng-enter-active {  
    -webkit-transform: translateX(0);  
    transform: translateX(0);  
}  
.slide-right.ng-leave {  
    z-index: 101;  
    -webkit-transform: translateX(0);  
    transform: translateX(0);  
}  
.slide-right.ng-leave.ng-leave-active {  
    -webkit-transform: translateX(100%);  
    transform: translateX(100%);  
}

Answer 1

我想到的第一个RAW就是像你一样在ui-view中添加一个类。如果我们拥有它，解决方案很简单，那么我们将在CSS中为它设置样式。

我目前面临同样的问题，我正在创建一个我使用角度的Cordova应用程序，这种类型的滑动是必需的。

在我看来，为了确定方向（后退，前进），您可以创建一个包含$ state.go（..）函数的简单服务。因此，您将拥有两个功能 Service.goBack（'state'）， Service.goForward（'state'）。这有助于您确定方向。然后在服务中，您可以尝试更改要生成视图的容器类。可能 $ rootScope 将是正确的方向。

可能还有一个解决方案，尝试检查onEit，onExit函数回调状态（$ stateProvider）。也许它也会帮助你。

使用angularjs使用nganimate进行后退和前进导航

语言提示

1 个答案: