javascript - 如何使用 framework7 在同一个 html 页面中包含不同的 View ？

Question

我是框架 7 的初学者。我正在开发一个小应用程序，我将 html 代码拆分到不同的文件中，因为我有很多页面都包含共同的 div。我的问题是:我有一个 page.html，在我的 page.html 里面 我想在同一窗口中包含来自不同 html 文件的不同 div。例如在 php 中我们可以用

include("");

但在 framework7 中我只能包含一个

<div class="view view-main view-init" data-url="/page/" data-name="page"></div>

我想包含更多这样的 View

<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>

我在这里放一张图片来更好地解释我。

what i'd like to do感谢您的帮助。

页面.html

<div data-name="pages" class="page">    
<div class="page-content pg-no-padding">

    <div class="row justify-content-center">
        <div class="col-100 tablet-100 desktop-80">
            <div class="block">
            <form class="list" id="pages1">

                <div class="row justify-content-center">
                    <div class="block-title">
                        <h1> Pages</h1>
                    </div> <!--block-title-->
                </div><!--row-->

                <div class="row">
                    <div class="col">
                        <div class="block-title">
                            <h2> Card 1</h2>
                        </div> 

                        <div class="card">
                            <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">Input1</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <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">Input2</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->


                Here I'd like to include the code inside pages1.html

                Here I'd like to include the code inside pages2.html


            </form> 
            </div><!--block-->


            <div class="block">
            <a class="col button button-fill" href="#">Salva</a>
            </div>

        </div><!--col-100-->        
    </div><!--row-->
</div> <!-- ./ page-content-->

pages1.html

<div class="row">
                    <div class="col">
                        <div class="block-title">
                            <h2> Card2</h2>
                        </div> 

                        <div class="card">
                            <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">Input1</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <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">Input2</div>
                                                <div class="item-input-wrap">
                                                    <input type="number" placeholder="" name="">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->

Answer 1

要包含多 View 布局，您需要执行以下操作:

1. 您需要像这样用类 View 创建包装器:<div class="views tabs">
2. 您需要像这样创建 div View :<div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
3. 您需要确保只有一个 View 类包装器。

在Js中:你可以通过这个来控制多个 View :

var view1 = app.views.create('#view-1', {...}); 
var view2 = app.views.create('#view-2', {...}); 

更多详情:F7 View

对于嵌入式多 View 不喜欢选项卡: Example注意:对于 F7 中的每个 View 都有 100% 的高度...你需要确保那个高度最终等于 100%