mui跳转

Dear 丶 2022-06-01 00:21 274阅读 0赞

//解决 所有a标签 导航不能跳转页面

mui('body').on('tap','a',function()\{ document.location.href=this.href;\});

今天整理MUI移动端页面跳转的几种方法和遇到的不同的坑

先上设置button、label和a标签的代码：

<body>

<button type="button" class="mui-btn"  οnclick="jumpToDetailView()"id="jumpToDetail">查看企业详情</button>

<div class="div">

<label class="test" id="test">this is a test label</label>

<a class="atest" id="at">this is a test</a>

</div>

</body>

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

function jumpToDetailView()\{

alert('123');

mui.openWindow(\{

url:'details/detail.html',

id:'detail.html'

\});

\}

这种方法貌似只对button有效，在验证函数时，alert验证有效且不影响函数

**跳转方法二：添加监听事件跳转**

document.getElementById('at').addEventListener('tap',function()\{

//alert('test a');

mui.openWindow(\{

url:'details/detail.html',

id:'detail.html'

\});

\});

添加监听事件对所有跳转都有效，但是在验证的过程中，使用了alert以后发现弹出框不显示且跳转不起作用，不知道具体什么原因，等以后找到原因再补充。

**跳转方法三：使用.on形式跳转**

基于官网（ [http://dev.dcloud.net.cn/mui/event/\#on][http_dev.dcloud.net.cn_mui_event_on]）上的描述“除了可以使用addEventListener()方法监听某个特定元素上的事件外， 也可以使用.on()方法实现批量元素的事件绑定”。

参考样例：

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

以下是本宝宝的一些失败的例子，希望好心人士看到能指出问题所在。不过我也不会放弃的，如果找到了正确方法我会及时更新的。在这里先自我检讨一下。

//label使用.on形式跳转

// mui('.test').on('tap',function(e)\{

// //alert('test label');

// mui.openWindow(\{

// url:'details/detail.html',

// id:'detail.html'

// \});

// \});

// mui('\#test').on('tap',function(e)\{

// //alert('test label');

// mui.openWindow(\{

// url:'details/detail.html',

// id:'detail.html'

// \});

// \});

//a标签使用.on形式跳转

// mui('.atest').on('tap','a',function(e)\{

// //alert('test a');

// mui.openWindow(\{

// url:'details/detail.html',

// id:'detail.html'

// \});

// \});

转载：http://blog.csdn.net/xuepan1994/article/details/51900447

[http_dev.dcloud.net.cn_mui_event_on]: http://dev.dcloud.net.cn/mui/event/#on

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 js跳转(js跳转网页)

如何使用js跳转代码 javascript常用的页面跳转方法为： window.location.href=some\_url; 下面举例演示点击按钮后，延迟3秒跳转

绝地灬酷狼/ 2023年09月23日 18:39/ 0 赞/ 90 阅读

相关 mui页面跳转及传参

页面跳转传参父页面： mui.openWindow({ url: './apply_fert_accu_result.html', ex

﹏ヽ暗。殇╰゛Y/ 2023年05月29日 02:47/ 0 赞/ 67 阅读

相关 mui获取php表格,如何优化mui列表跳转到详情页

因为列表页到详情页是多对一的形式，即列表页的多条数据列表对应的是一个详情页，只是数据不同而；因此，可以在加载列表页时预加载详情页，即创建一个详情页的webview,但是不显示出

拼搏现实的明天。/ 2022年10月21日 11:43/ 0 赞/ 259 阅读

相关 [MUI专题] 侧滑菜单a标签跳转

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。前言侧滑是一个非常实用的选项组件，它在Android App应用中非常广泛，常见的场景有

朴灿烈づ我的快乐病毒、/ 2022年08月29日 10:14/ 0 赞/ 187 阅读

相关 mui跳转

//解决所有a标签导航不能跳转页面 mui('body').on('tap','a',function()\{ document.location.href=this.h

Dear 丶/ 2022年06月01日 00:21/ 0 赞/ 275 阅读

相关小程序页面跳转、带参数跳转以及navigator跳转

一、单纯的页面跳转跳转到的页面分 tabBar 页面和非tabBar 页面。url路径可以写相对和绝对路径。 1、跳转到非导航页面，用 wx.navigateTo

朱雀/ 2022年05月11日 06:38/ 0 赞/ 548 阅读

相关 MUI框架-10-MUI 数据交互-跳转详情页面

MUI框架-10-MUI 数据交互-跳转详情页面上一篇介绍了如何实现数据交互，给别人的 API 发送 ajax 请求，我们得到数据，再使用 art-templat

我就是我/ 2022年05月10日 08:26/ 0 赞/ 377 阅读

相关 mui 跳转到设置界面和 ios 无法上线的解决办法

好多人都这么写： if(mui.os.ios){ plus.runtime.launchApplication({action:'App-Prefs:

冷不防/ 2022年05月08日 06:08/ 0 赞/ 337 阅读

相关 MUI携带参数跳转并获取该参数

//页面A mui('.mui-table-view').on('tap', '.next', function() { var id = th

àì夳堔傛蜴生んèń/ 2022年03月16日 03:22/ 0 赞/ 480 阅读

相关 mui中a标签的跳转问题

快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及30

「爱情、让人受尽委屈。」/ 2022年03月10日 19:38/ 0 赞/ 290 阅读