0

マルチデバイス ハイブリッド アプリ テンプレートと WinJS (これは Cordova ベースです) を使用してアプリを作成しています。

単一ページのナビゲーションが正しく設定されており、ルート ページ内に読み込まれる最初のページには、複数の PivotItems を持つピボットが含まれています。各 PivotItem には、いくつかの項目を含む ListView が含まれているため、小さなデバイス (電話) ではページの下部を超えて表示されます。

WP8 では、ListView をリストの一番下までスクロールすると停止しますが、一番下までスクロールしようとすると、ListView がバウンス効果を作成するのではなく、ページ全体が移動します。また、電話画面の上部にあるステータス バーの下でピボット タイトルがクリップされるため、バウンス効果が正しく行われません。逆方向にスクロールして、リストの一番上に到達すると、同じ効果が得られます...ページ全体が移動します。

悪いスクロール動作は、ListView 領域に触れているときにのみ発生します。PivotItem ヘッダーを垂直方向にパンしようとしても、何も起こりません。ListViews がすべて空の場合 (つまり、ビューモデルが壊れている場合)、ListView 領域に触れてもスクロール動作は発生しません。

このコードは、ルート ページの CSS ファイルに既に追加しています。

body {
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;
}

これにより、デフォルトの WP8 デフォルト HTML ページのバウンスが実際に停止します。いくつかのテキスト要素とボタンのみを含む別のページをロードできますが、スクロールしません。ピボット スクロールの問題には役立ちません。

config.xml ファイルを手動で編集して、次の行を追加してみました。

  <preference name="DisallowOverscroll" value="true"/>

役に立ちませんでした。誰にも提案はありますか？

4

1 に答える 1

1

HTML5/javascriptアプリプログラミングの初心者として、私はまだ優れたレイアウト スキームが利用できないことに気づきませんでした。Microsoft は CSS グリッド (-ms-grid) プロパティを実装することでこれを正しく行っているようですが、これは他のブラウザーにはまだ存在しません。

したがって、WinJS の現在のコントロール セットがすべてのブラウザーで適切に動作するようにするには、ヘッダー、コンテンツ、およびフッター (アプリバー) の絶対配置を既定にする必要がありました。ラベルを展開して表示する現在のアプリバー アニメーションでは、メイン コンテンツ領域の下部に十分な余白を残す必要があり、スペースが無駄になるため、これは理想的ではありません。

私はこれを使用します（別のstackoverflowの回答から自由に適応しています）

<!-- Header not necessary for pivot -->
<header class="row" aria-label="Header content" role="banner">
   {title stuff}
</header>
<section class="content row scroll-y" aria-label="Main content" role="main">
   {main content}
</section>
<footer aria-label="App Bar" role="menubar"
        data-win-control="WinJS.UI.AppBar"
        data-win-options="{placement: 'bottom', layout: 'commands'}">
    {appbar buttons}
 </footer>

これに付随するcssは次のとおりです。

.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

.header.row { height: 128px; top: 0; }
.content.row { top: 128px; bottom: 50px; }

ヘッダーの実際のピクセルの高さは自由ですが、アプリバーの高さは WinJS の現在のアプリバーでうまく機能します (2014 年 11 月現在)。

于 2014-11-19T21:12:33.440 に答える