如何使用framework7在同一个html页面中包含不同的视图？答案

【问题标题】：How to include different view in the same html page with framework7?如何使用framework7在同一个html页面中包含不同的视图？
【发布时间】：2018-10-27 09:12:35
【问题描述】：

我是框架 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>

我想包含更多这样的视图

<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 感谢您的帮助。

pages.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-->

【问题讨论】：

标签： javascript html-framework-7

【解决方案1】：

要包含多个视图布局，您需要这样做：

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

在Js中：你可以通过这个来控制多个视图：

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

更多详情：F7 View

对于嵌入式多视图不像选项卡： Example 注意：对于 F7 中的每个视图都有 100% 的高度...您需要确保最终高度等于 100%

【讨论】：

嗨 Anees，感谢您的帮助，但它会创建标签。我编辑了我的问题以更好地解释我。
欢迎您的朋友...我更新了我的答案，现在添加了一个像您的图像这样的多视图的真实示例...
您好，感谢您的回复。我看到了这个例子，但在我的例子中，内容 MainView 在 page1.html 内，而内容 homeview 在 page2.html
欢迎 fgg，您需要为 view1 和 view2 设置路由...根据需要加载所需的内容，例如： routes: [// First one { path: '/', url: ' ./home.html' }, ] // 第二个：routes: [ { path: '/', url: './page2.html' }, ] 我想这会解决你的问题
我在 my-app.json 中包含了路径，但是如何在 pages.html 中包含 pages1.html 和 pages2.html？我上传了我的问题。谢谢

【解决方案2】：

编辑：经过长时间的调查，我从文档中发现您可以这样做：

<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
  ...
</div>

在您的路由器中，还需要定义您的路由：

var app = new Framework7({
  root: '#app',

  // Create routes for all pages
  routes: [
    {
      path: '/',
      url: 'index.html',
    },{
      // Add your contents page route 
      path: '/your-page/',
      url: 'pages/your-page.html',
    },
    .....
});

希望对您有所帮助。

【讨论】：