WinJS Pivot无法正确显示

Question

我有一个使用HTML5和Javascript的Windows Phone应用程序。

我使用WinJS.Utilities.empty();清除DIV元素，然后WinJS.UI.Pages.render();将页面加载到同一个DIV中：

在其中一个加载的页面上，我正在尝试使用数据透视控件，我正在使用它，如下所示：

<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
    <div data-win-control="WinJS.UI.PivotItem"
         data-win-options="{ header: 'current' }">

         <div id="current">

             Lorum Ipsum...

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

加载页面时，Pivot控件加载和渲染，PivotItem标头正确呈现。但是当内容被渲染时，它是不可见的。我使用Visual Studio中的DOM资源管理器来查询标记和样式以查找问题。似乎PivotItem内容的容器DIV元素不合适，并隐藏在包含PivotItem头的DIV后面......

当我尝试在父页面中使用此标记时（不使用WinJS.UI.Pages.render();进行渲染），它的工作方式完全符合预期。

我还尝试以编程方式创建Pivot及其Items，但这会产生相同的结果。

非常感谢任何帮助。

Answer 1

在显示没有模板的内容时让我遇到同样的问题，在css中进行一些更改，这对我有用。 的 HTML

<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>

<强> CSS

.myPivot {
}

.myPivot div.win-pivot-item {
    left:0px !important;
    visibility: visible;
    width:100%;    
}
.myPivot .win-pivot .win-pivot-surface {
    width: 100%;
    position: fixed;
}