WP8/WinJS/Cordova - PivotItem에서 ListView의 시작 또는 끝을 스크롤하면 전체 페이지가 이동합니다.

Question

다중 장치 하이브리드 응용 프로그램 템플릿과 WinJS (Cordova 기반)를 사용하여 응용 프로그램을 작성하고 있습니다.

단일 페이지 탐색 설정이 올바르게되어 있고 루트 페이지에서로드 할 첫 번째 페이지에 여러 피벗 아이템이있는 피벗이 포함되어 있습니다. 각 PivotItem에는 작은 장치 (전화)에서 페이지 아래쪽으로지나 가게하는 여러 항목이있는 ListView가 있습니다.

WP8에서 목록의 맨 아래로 ListView를 스크롤하면 멈추지 만 바운스 효과를 만드는 ListView 대신 전체 페이지가 아래쪽으로 계속 이동하려고합니다. 또한 바운스 이펙트를 올바르게 수행하지 못하므로 피벗 제목이 전화기 화면 상단의 상태 표시 줄 아래에 잘립니다. 나는 그것을 역방향으로 다시 스크롤 할 수 있으며 목록의 맨 위에 올 때 동일한 효과를 얻습니다. 전체 페이지가 이동합니다.

잘못된 스크롤 동작은 ListView 영역을 만질 때만 발생합니다. PivotItem 헤더를 세로로 패닝하려고하면 아무 일도 일어나지 않습니다. ListView가 모두 비어있는 경우 (즉, 내 viewmodel이 손상된 경우) 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"/> 

. 누구든지 어떤 제안이 있습니까?

Answer 1

초보자 인 HTML5/javascript 앱 프로그래밍에서 아직 유용한 레이아웃 스키마가 없다는 것을 알지 못했습니다. Microsoft는 CSS 그리드 (-ms-grid) 속성을 구현하여 제대로 된 것처럼 보였지만 다른 브라우저에서는 아직 존재하지 않습니다.

따라서 모든 브라우저에서 WinJS의 현재 컨트롤 집합이 올바르게 작동하도록하려면 헤더, 내용 및 바닥 글 (appbar)의 절대 위치를 기본값으로 설정해야합니다. 라벨을 확장하고 표시하는 현재 Appbar 애니메이션은 주 컨텐츠 영역의 맨 아래에 좋은 여백을 남겨 두어 공간을 낭비해야하기 때문에 이상적이지 않습니다. 헤더에 대한

.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; } 

실제 픽셀 높이가 당신에게 달려 있지만 :

나는이 이것으로 간다 CSS는

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

(자유롭게 다른 유래 대답에서 적응) 사용 Appbar 하나는 WinJS의 현재 Appbar에서 잘 작동합니다 (2014 년 11 월).