MUI移动端页面跳转方式

MUI移动端页面跳转

MUi移动端跳转有三种常用方式:

跳转方法一:button类型使用οnclick='',函数跳转

示例代码:

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'
});
}) 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值