簡體   English   中英

Framework7:當我移動到其他視圖時,Navbar被隱藏

[英]Framework7 : Navbar hidden when I'm move to anothers views

我現在正在學習Framework7,但我遇到了這個問題。 我創建了兩個頁面,這是文件

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#673ab7">

    <title>Ciptaloka Editor</title>

    <link rel="icon" href="assets/img/favicon.png">
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="theme-teal">

<div class="views">
    <div class="view view-main">
        <div class="pages navbar-fixed">
            <div data-page="index" class="page">
                <!-- off canvas -->
                <div class="panel-overlay"></div>
                <div class="panel panel-left panel-cover">
                a
                </div>

                <!-- Navbar -->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="left">
                            <a class="link open-panel" data-panel-left>
                                <i class="icon material-icons">menu</i>
                            </a>
                        </div>
                        <div class="center">
                            Custom T-Shirt
                        </div>
                        <div class="right">
                            <a class="link">
                                Done
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Toolbar -->
                <div class="toolbar toolbar-bottom tabbar tabbar-labels">
                    <div class="toolbar-inner">
                        <a href="#produk" class="link tab-link active">
                            <i class="icon material-icons">dashboard</i>
                            <span class="tabbar-label">Produk</span>
                        </a>
                        <a href="#image" class="link tab-link">
                            <i class="icon material-icons">add_a_photo</i>
                            <span class="tabbar-label">Image</span>
                        </a>
                        <a href="#text" class="link tab-link">
                            <i class="icon material-icons">text_fields</i>
                            <span class="tabbar-label">Text</span>
                        </a>
                        <a href="#clipart" class="link tab-link">
                            <i class="icon material-icons">photo_filter</i>
                            <span class="tabbar-label">Clipart</span>
                        </a>
                    </div>
                </div>

                <!-- Content -->
                <div class="page-content">
                    <div class="content-block">
                        <div class="tabs">
                            <div class="tab active" id="produk">
                                <a href="index2.html">Go home 2</a>
                            </div>
                            <div class="tab" id="image">
                                Image
                            </div>
                            <div class="tab" id="text">
                                Text
                            </div>
                            <div class="tab" id="clipart">
                                Clipart
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>

index2.html

<div data-page="index2" class="page">
    <!-- Navbar -->
    <div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a class="link open-panel">
                <a href="index.html">
                    <i class="icon material-icons">back</i>
                </a>
            </a>
        </div>
        <div class="center">
            Custom Case
        </div>
    </div>
    </div>

    <!-- Content -->
    <div class="page-content">
        <div class="content-block">
            Success direct page
        </div>
    </div>
</div>

當我點擊index.html上的'go home 2'時,它成功地指向index2.html,內容會顯示,但不會顯示導航欄,它只顯示背景,但文本是隱藏的。 這是我的劇本:

在此輸入圖像描述

為什么會這樣? 我錯過了什么嗎?

您的導航欄位於數據頁面內,您切換到index2並更改所有頁面。 讓navbar在外面 - > view-main - > navbar,然后是數據頁面

抱歉,我的英語不好。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM