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>

我想包括更多这样的视图

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

Answer 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％

Answer 2

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

foreach(DataTable table in dataset1)
{
  if(table.TableName == "TableForDataset2")
  {
   dataset2.Tables.Add(table);
  }
}

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

<!-- 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>

希望获得帮助。

如何在Framework7的同一个HTML页面中包含不同的视图？

2 个答案: