Monaca 앱은 대시 보드 미리보기에서 작동하지만 Android 6 전화에서는 작동하지 않습니다.

Question

Onsen-UI에 대한 기본 todo-list 예를 수정하려고합니다.

메뉴에 새 버튼을 추가했습니다.

<ons-toolbar-button id="resptab" > 
    <ons-icon icon="ion-pie-graph" size="28px"></ons-icon> 
    Table 
</ons-toolbar-button> 

와 네비게이터 목록

<ons-splitter id="splitter"> 
    <ons-splitter-side id="splitter-menu" page="menu.html" 
     side="left" width="220px" collapse swipeable> 
    </ons-splitter-side> 
    <ons-splitter-content> 
     <ons-navigator id="myNavigator" animation="slide" page="list.html"/> 
    </ons-splitter-content> 
</ons-splitter> 

내가 이벤트 리스너

document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this)); 

과 기능을 통해 스크립트에서 새 페이지를 추진하고있어 포장

todo.setRespTable = function() { 
    ons.notification.prompt('Switch to responsive table view',{ 
     title: 'Responsive Table', 
     cancelable: true, 

     callback: function(label) { 
      document.querySelector('#myNavigator').pushPage('table.html') 
     }.bind(this) 
    });  
} 

모든 것이 특급으로 작동합니다. 반사 된 내 갤럭시 안드로이드 6 전화 모나카 디버거를하려고 할 때하지만 미리 내 바탕 화면의 대시 보드에서, 그것은 querySelector 나는 또한 위의 버튼을 밝혔다 것으로 나타났습니다 null

것을 보여주는 로그의 오류와 함께 실패 Android 휴대 전화에서 앱을 실행할 때 메뉴에 표시되지 않지만 다시 - 대시 보드 미리보기에서 볼 수 있습니다.

Answer 1

메뉴 항목

<ons-list> 
    <ons-list-item data-filter="all" tappable>All</ons-list-item> 
    <ons-list-header>Status</ons-list-header> 
    <ons-list-item data-filer="uncompleted">Pending</ons-list-item> 
    <ons-list-item data-filter="completed">Completed</ons-list-item> 
    <ons-list-header>Responsive</ons-list-header> 
    <ons-list-item id="resptab" ><ons-icon icon="ion-pie-graph" size="28px"></ons-icon>RxTable</ons-list-item>   
</ons-list> 

와 버튼을 대체하여과에

todo.menuInit = function(target) { 
    document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));  
} 

를 호출하는 메뉴 초기화

document.addEventListener('init', function(event) { 
    var view = event.target.id; 
    if (view === 'menu' || view === 'list') { 
     todo[view + 'Init'](event.target); 
    }; 
}, false); 

에 이벤트 처리기를 설정하여 두 문제를 해결 이 article의 끝은 Reaction이있는 OnsenUI에 해당 버전이 있으며, 아래의 렌더링 함수 :

<Page> 
    <List dataSource={['Searching', 'Lists', 'Twitting', 'Google Drive','Settings']} 
    renderRow={(title) => (
     <ListItem key={title} 
     onClick={() => this.hide2title(title)} tappable>{title} 
     </ListItem> 
    )}/> 
</Page> 

후자의 경우 배열 함수가 값을 메서드로 전달합니다.