[英]Monaca app working in dashboard preview but not on Android 6 phone
I'm trying to modify the basic todo-list example for Onsen-UI. 我正在尝试修改Onsen-UI的基本待办事项列表示例。
I've added a new button in the menu. 我在菜单中添加了一个新按钮。
<ons-toolbar-button id="resptab" >
<ons-icon icon="ion-pie-graph" size="28px"></ons-icon>
Table
</ons-toolbar-button>
and a navigator wrapping the list 和导航器包装列表
<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>
I'm pushing a new page from a script through an event listener 我正在通过事件监听器从脚本推送新页面
document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
and a function 和一个功能
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)
});
}
Everything works fine as expected in my desktop dashboard with the Preview but when I try it with Monaca Debugger on my Galaxy Android 6 phone, it fails with an error in the Log showing that querySelector
is null
一切正常,并在预览版桌面仪表板中正常运行,但是当我在Galaxy Android 6手机上使用Monaca Debugger尝试运行时,它失败并显示日志错误,表明
querySelector
为null
I've also noticed that the above said button is not shown in the menu when I run the app on the Android phone, while - again - I can see it from the dashboard Preview. 我还注意到,当我在Android手机上运行该应用程序时,菜单中未显示上述按钮,而-再次-我可以从仪表板“预览”中看到它。
Solved both issues by replacing the button with a menu item 通过将按钮替换为菜单项解决了这两个问题
<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>
and by setting the event handler in the menu init 并通过在菜单init中设置事件处理程序
document.addEventListener('init', function(event) {
var view = event.target.id;
if (view === 'menu' || view === 'list') {
todo[view + 'Init'](event.target);
};
}, false);
which calls 哪个电话
todo.menuInit = function(target) {
document.querySelector('#resptab').addEventListener('click', this.setRespTable.bind(this));
}
In the end of this article there is the corresponding version in OnsenUI with React, an extract from the render function below: 在本文的最后,有一个带有React的OnsenUI中的相应版本,摘自下面的render函数:
<Page>
<List dataSource={['Searching', 'Lists', 'Twitting', 'Google Drive','Settings']}
renderRow={(title) => (
<ListItem key={title}
onClick={() => this.hide2title(title)} tappable>{title}
</ListItem>
)}/>
</Page>
In the latter case, notice the array function to pass value to method. 在后一种情况下,请注意数组函数将值传递给方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.