MUI移动端页面跳转方式
2017-04-07 11:15
435 查看
MUI移动端页面跳转
MUi移动端跳转有三种常用方式:
跳转方法一:button类型使用onclick='',函数跳转
示例代码:
跳转方法二:添加监听事件跳转
示例代码:
跳转方法三:使用.on形式跳转
基于官网(http://dev.dcloud.net.cn/mui/event/#on)上的描述“除了可以使用 addEventListener() 方法监听某个特定元素上的事件外, 也可以使用 .on()方法实现批量元素的事件绑定”。这里要特别注意:
mui的绑定仅支持事件委托,不支持当前元素绑定,当前元素绑定请直接使用 addEventListener, removeEventListener,可以看 MUI的源码,直接绑定是不支持的。
比如:
示例:
点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面:
MUi移动端跳转有三种常用方式:
跳转方法一:button类型使用onclick='',函数跳转
示例代码:
function jumpToDetailView(){ mui.openWindow({ url:'gcx.html', id:'gcx.html' }); }这种方法貌似只对button有效。
跳转方法二:添加监听事件跳转
示例代码:
document.getElementById('gcx').addEventListener('tap',function(){ mui.openWindow({ url:'gcx.html', id:'gcx.html' }); });添加监听事件对所有跳转都有效。
跳转方法三:使用.on形式跳转
基于官网(http://dev.dcloud.net.cn/mui/event/#on)上的描述“除了可以使用 addEventListener() 方法监听某个特定元素上的事件外, 也可以使用 .on()方法实现批量元素的事件绑定”。这里要特别注意:
mui的绑定仅支持事件委托,不支持当前元素绑定,当前元素绑定请直接使用 addEventListener, removeEventListener,可以看 MUI的源码,直接绑定是不支持的。
比如:
mui('body').on('tap','a',function(){})这样就绑定了所有的A标签元素了。单独绑定一个的话,建议直接用 addEventListener
示例:
点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面:
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){ //获取id var id = this.getAttribute("id"); //传值给详情页面,通知加载新数据 mui.fire(detail,'getDetail',{id:id}); //打开新闻详情 mui.openWindow({ id:'detail', url:'detail.html' }); })