Why is it that if navbar is placed in front of the page in the view under framework7, the navigation bar can not be displayed in ios and the secondary navigation bar can not be displayed in android? - Codes Helper

questions such as questions

<body>
        <!-- App root element -->
        <div id="app">
            <!-- Statusbar overlay -->
            <div class="statusbar">123123</div>
            <!-- Your main view, should have "view-main" class -->
            <div class="view view-main">
                <!-- Top Navbar -->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="title"></div>
                        <div class="subnavbar">
                            <div class="subnavbar-inner">
                                <div class="segmented segmented-raised">
                                    <button class="button" ontouchend="fn_TBD();"></button>
                                    <button class="button" ontouchend="fn_TBD();">demo</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Initial Page, "data-name" contains page name -->
                <div data-name="home" class="page page-with-subnavbar">
                    <!-- Scrollable page content -->
                    <div class="page-content">
                    </div>
                </div>

                <div class="toolbar tabbar toolbar-bottom-md no-shadow ">
                    <div class="toolbar-inner">
                        <a href="/invitationList/" class="tab-link">demo1</a>
                        <a href="/lectureList/" class="tab-link">demo2</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Path to Framework7 Library JS-->
        <script type="text/javascript" src="./dist/js/framework7.min.js"></script>
        <!-- Path to your app js-->
        <script type="text/javascript" src="./js/common.js"></script>
        <script type="text/javascript" src="./js/my-app.js"></script>
    </body>

contents of my-app.js

var app = new Framework7({
    // App root element
    root: "-sharpapp",
    // App Name
    name: "my app",
    // App id
    id: "com.myapp.test",
    // Enable swipe panel
    panel: {
        swipe: "left",
    },
    // Add default routes
    routes: [{
            path: "/about/",
            url: "about.html",
        },
        {
            path: "/popup-content/",
            popup: {
                content: "<div class="popup"><div class="view"><div class="page"></div></div></div>"
            },

        },
        {
            path: "/chat/",
            url: "./pages/chat.html",
        },    
    ],
    // ... other parameters
    on: {
        init: function() {
            console.log("App initialized");

        },
        pageInit: function() {
            console.log("Page initialized");

        },
    },
    theme: "ios",
    methods: {
        alert: function() {
            app.dialog.alert("Hello World");
        }
    },
    clicks: {
        externalLinks: ".external",
    },
    dialog: {
        title: "Message from haihao",
    },
    navbar: {
        hideOnPageScroll: true,
        iosCenterTitle: true,
    },
    toolbar: {
        hideOnPageScroll: false,
    },
    toast: {
        closeTimeout: 3000,
        closeButton: true,
    },
});

var mainView = app.views.create(".view-main", {
    name: "Fw7",
    on: {
        pageInit: function() {
            console.log(this.router);
        }
    },
});

when app.theme is switched to "ios"" and "auto" respectively, the former does not display the navigation bar and the latter does not display the secondary navigation bar.
the above is tested in Hbuilder.
do any seniors know what"s going on?