angularjs – 在侧面菜单页面上使用Ionic选项卡

发布时间：2020-12-17 17:24:41 所属栏目：安全来源：网络整理

导读：我是离子框架的新手,并试图在侧面菜单页面上使用选项卡组件实现正常工作,但是页面之间的导航动画与左右滑动动画声明不起作用. 例如有一个基本状态(app),它保存侧面菜单代码 .state('app',{ url: '/app',abstract: true,templateUrl: "templates/menu.html",

我是离子框架的新手,并试图在侧面菜单页面上使用选项卡组件实现正常工作,但是页面之间的导航动画与左右滑动动画声明不起作用.

例如
有一个基本状态(app),它保存侧面菜单代码

.state('app',{
        url: '/app',abstract: true,templateUrl: "templates/menu.html",controller: "appController"
    })

并将其加载到

<body>
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
...

侧面菜单页面加载了父级(app.pageOne,app.pageTwo等)

登录和注册页面在根目录下加载,因此不需要包含侧面菜单(登录,注册等)

我创建了一个标签模板,用于侧边菜单页面,其中包含标签的另一个基本状态

.state('app.tabs',{
        url: '/tab',views: {
            'menuContent' :{
                templateUrl: "templates/tabs.html"
            }
        }
    })

并在侧面菜单视图中加载

<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

现在,如果我有一个页面’app.pageOne’并导航到’app.pageTwo’,幻灯片动画将按预期工作.

但是,如果我在标签页’app.tabs.home’并点击链接转到’app.pageTwo’,导航栏不会更新,也不会有任何动画过渡.

我知道它看起来像是一个父母的孩子问题,但我无法解决它,任何想法？

国家如下,例如

login
register
app ____page1
   |____page2
   |____Tabs
          |____Home
          |____Contact etc

page1动画到page2工作正常
page2的主页没有动画(它只是直接加载)

希望更有意义.

解决方法

检查这个网址 http://codepen.io/calendee/pen/JdtuG?editors=101
这个对我有用：)

HTML

<html ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">

    <title>Ionic Template</title>

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>

<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>

<script id="entry.html" type="text/ng-template">
    <ion-nav-bar animation="nav-title-slide-ios7"
                 type="bar-positive"
                 back-button-type="button-icon"
                 back-button-icon="ion-ios7-arrow-back">
    </ion-nav-bar>

    <ion-view title="{{navTitle}}" class="bubble-background">

        <ion-content has-header="true" padding="true">

            <h1>Entry Page!</h1>

            <a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>

        </ion-content>

    </ion-view>

</script>

<script id="tabs.html" type="text/ng-template">
    <ion-view title="{{navTitle}}"  left-buttons="leftButtons">

        <ion-tabs tabs-type="tabs-icon-only">
            <ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 1 Content</h2>
                </ion-content>
            </ion-tab>

            <ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 2 Content</h2>
                </ion-content>
            </ion-tab>

            <ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
                <ion-content has-header="true" padding="true">
                    <h2>Tab 3 Content</h2>
                </ion-content>
            </ion-tab>
        </ion-tabs>


    </ion-view>
</script>

<script id="mainContainer.html" type="text/ng-template">

    <ion-side-menus>

        <ion-pane ion-side-menu-content>
            <ion-nav-bar type="bar-positive"
                         back-button-type="button-icon"
                         back-button-icon="ion-ios7-arrow-back"
                         animation="nav-title-slide-ios7"
                >

             </ion-nav-bar>
            <ion-nav-view name="main"></ion-nav-view>
        </ion-pane>

        <ion-side-menu side="left">
            <header class="bar bar-header bar-assertive">
                <div class="title">Side Menu</div>
            </header>
            <ion-content has-header="true">
                <ul class="list">
                    <a ui-sref="entry" class="item">Back To Entry Page</a>
                    <a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
                    <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
                </ul>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>


</script>


<script id="home.html" type="text/ng-template">
    <ion-view title="{{navTitle}}" left-buttons="leftButtons">

        <ion-content has-header="true" padding="true">

            <h1>Home Page!</h1>

            <a ui-sref="main.info" class="button button-positive">Info</a>

        </ion-content>

    </ion-view>

</script>

<script id="info.html" type="text/ng-template">
    <ion-view title="{{navTitle}}" left-buttons="leftButtons">

        <ion-content has-header="true" padding="true">

            <h1>Info Page!</h1>

        </ion-content>

    </ion-view>

</script>

</body>
</html>

JavaScript的

angular.module('ionicApp',['ionic'])

    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {

        $stateProvider
            .state('entry',{
                url : '/entry',templateUrl : 'entry.html',controller : 'EntryPageController'
            })

            .state('main',{
                url : '/main',templateUrl : 'mainContainer.html',abstract : true,controller : 'MainController'
            })

            .state('main.home',{
                url: '/home',views: {
                    'main': {
                        templateUrl: 'home.html',controller : 'HomePageController'
                    }
                }
            })

            .state('main.info',{
                url: '/info',views: {
                    'main': {
                        templateUrl: 'info.html',controller : 'InfoPageController'
                    }
                }
            })

            .state('main.tabs',{
                 url: '/tabs',views: {
                     'main': {
                         templateUrl: 'tabs.html',controller : 'TabsPageController'
                     }
                 }
            })

        $urlRouterProvider.otherwise('/entry');
    }])

    .controller('MainController',[ '$scope',function($scope) {
        $scope.toggleMenu = function() {
            $scope.sideMenuController.toggleLeft();
        }
    }])

    .controller('EntryPageController','$state',function($scope,$state) {
        $scope.navTitle = 'Entry Page';

        $scope.signIn = function() {
            $state.go('main.home');
        }
    }])

    .controller('HomePageController',$state) {
        $scope.navTitle = 'Home Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

    .controller('InfoPageController',$state) {
        $scope.navTitle = 'Info Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

    .controller('TabsPageController',$state) {
        $scope.navTitle = 'Tab Page';

        $scope.leftButtons = [{
            type: 'button-icon icon ion-navicon',tap: function(e) {
                $scope.toggleMenu();
            }
        }];
    }])

它花了一些调整但最终在我的场景中工作

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!