如何在登录页面框架7中隐藏面板和导航栏

Question

我只想在登录页面正确隐藏面板和导航栏。登录后我想给他们看。我部分地完成了这个任务，因为我的代码有一个不好的副作用。当我打开应用程序时，我看到了我的登录页面，但导航栏出现了几秒钟，然后消失了。我想在没有这种影响的情况下访问登录页面。我想立即看到没有它们的登录页面。我该如何解决？

我在 index.html

中声明了它们

 <div id="app">
    <div class="panel panel-left panel-cover">
        <div class="navbar color-theme-green ">
            <div class="navbar-inner sliding">
                <div class="title">Menu</div>
            </div>
        </div>
        <div class="block">
            <div class="list links-list">
                <ul>
                    <li>
                        <a href="/home/" class="panel-close">
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">graph_square</i>
                                    <i class="material-icons md-only">dashboard</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Home</div>
                                </div>
                            </div>
                        </a>
                    </li>                       
                    <li id="company" style="display:none;">
                        <a href="/company/" class="panel-close" >
                            <div class="item-content">
                                <div class="item-media">
                                    <i class="f7-icons ios-only">home</i>
                                    <i class="material-icons md-only">home</i>
                                </div>
                                <div class="item-inner">
                                    <div class="item-title">Company</div>
                                </div>
                            </div>
                        </a>    
                    </li>                       
                </ul>
            </div>
        </div>
    </div>
    <!-- Top Navbar -->
    <div class="navbar color-theme-green">
        <div class="navbar-inner sliding">
            <div class="left">
                <a class="link panel-open">
                    <i class="f7-icons ios-only">menu</i>
                    <i class="material-icons md-only">menu</i>
                    <!--<span class="ios-only">Back</span>-->
                </a>

                <a class="link back">
                    <i class="icon icon-back"></i>
                    <span class="ios-only">Back</span>
                </a>
            </div>
            <div class="title">My app</div>             
        </div>
    </div>

    <div class="view view-main"></div>

这是我的配置文件app.js，我在其中显示和隐藏 pageInitEvent

上的元素

   var $$ = Dom7;

var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'myApp',
// App id
id: 'it.myapp.myApp',
theme: 'auto',
version: '0.0.1',
cacheDuration: 0,
cache: false,
stackPages: true,
preloadPreviousPage: true,


panel: {
    swipe: 'right',
    swipeNoFollow: true
},
/**
 * Routes
 */
routes: [
    {
        name: 'home',
        path: '/home/',
        url: './pages/home.html',
        on: {
            pageInit:   function(e, page) {

                            app.navbar.show('.navbar');                                             
                            page.router.clearPreviousHistory();
                        }

        },
    },
    {
        name: 'login',
        path: '/login/',
        url: './pages/login.html',
        on:{ 
                pageInit: function(){
                    app.navbar.hide('.navbar');

                    }
            },
    }

}

最后这是我的 login.html 页面，我在其中放置了 no-navbar 以隐藏它。

<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
    <!-- Login form -->
    <form id="form-login">
        <div class="row justify-content-center">
            <div class="col-100 tablet-80 desktop-50">
                <div class="card head-card-forest">
                    <div class="card-header">
                        <span></span><h2>Login</h2><span></span>
                    </div>
                    <div class="card-content card-content-padding">                             
                        <div class="row">
                            <div class="col-100 tablet-auto desktop-auto">
                                <div class="list no-hairlines-md">
                                    <ul>
                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Email</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="username"  placeholder="Username">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="item-content item-input">
                                            <div class="item-inner">
                                                <div class="item-title item-label">Password</div>
                                                <div class="item-input-wrap">
                                                    <input type="password" name="password"  placeholder="Password">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="block">
                                    <div class="row">
                                        <a class="col button button-fill" id="button-login" onclick="getLogin()"> Accedi </a>
                                    </div>                                      
                                </div>
                            </div><!--col-->                                    
                        </div><!--row-->
                    </div><!--card-content-->
                </div><!--.card-->                              
            </div><!--.col-->                   
        </div><!--.row-->   
    </form>
</div> <!-- ./ page-content -->

Answer 1

最好的办法是在初始化之前或安装时隐藏导航栏你可以试试这两个

1:初始化前

 {
        name: 'login',
        path: '/login/',
        url: './pages/login.html',
        on:{ 
                pageBeforeIn: function(){
                    app.navbar.hide('.navbar');

                    }
            },
    }

2：当它被注入到DOM一个

   {
            name: 'login',
            path: '/login/',
            url: './pages/login.html',
            on:{ 
                    pageMounted: function(){
                        app.navbar.hide('.navbar');

                        }
                },
        }

加载所需组件和导航栏后将触发 pageInit

Answer 2

您可以使用 pageInit 事件隐藏登录页面中的面板

pageInit : function (e,p) { p.app.panel.left.hide() }

如何在登录页面框架7中隐藏面板和导航栏

How to hide panel and navbar in login page framework7

javascript

html-framework-7