MUI移动端页面跳转

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

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

<body>

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

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

</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）上的描述“除了可以使用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'

// });

MUI移动端页面跳转相关推荐

mui几种页面跳转方式对比
mui几种页面跳转方式对比 http://blog.csdn.net/uikoo9/article/details/44676963 [几种打开页面的方式] 1.初始化时创建子页面 2.直接打开新页面 ...
基于HBuilderX创建移动app项目并利用mui实现简单页面跳转
刚开始学,听老师讲了一些介绍,要求我们做一个页面跳转,当时内心真的是万马奔腾,他的是使用什么icon的来实现的,但是我没看不懂怎么实现页面跳转的,就使用了mui来做了.百度了很多内容,杂七杂八的,所以 ...
mui从iframe页面跳转到应用根目录页面
/*** @description: mui 从iframe页面跳转到应用根目录* @param {*} pathURL 跳转地址* @return {*}*/ function jumpPage(p ...
php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
关于移动端页面跳转的方赞
移动端不支持a标签了好坑 $(".pingjia").tap(function () { // body... alert(1); window.location.href=&q ...
vue-router常见问题解决方案。（滚轴回到顶部、页面跳转同一页面报错、手机电脑端路由跳转）
当页面跳转后,侧边滚轴会还是一个页面位置 //路由跳转后,页面回到顶部 router.afterEach(() => {document.body.scrollTop = 0;document. ...
浅谈移动端页面无刷新跳转问题的解决方案
最近开发微信公众号,用的框架是一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,卡顿,不流畅,因此不采用传统的页面跳转方式,看到不少手机网页开发的框架都都是在 ...
html 自动返回首页,mui页面跳转，进入子页面后自动回到首页
代码如下: 在线投保 .title{ margin: 20px 15px 10px; color: #6d6d72; font-size: 15px; } .oa-contact-cell.mui-t ...
MUI框架开发HTML5手机APP(二)--页面跳转传值底部选项卡切换
原文链接: 一.MUI加载子页面 1加载子页面详解在mobile app开发过程中,经常遇到卡头卡尾的页面,也就是说头部和尾部保持不动,而只有中间区域可以滚动,常见的就是新闻列表与详情页等情况: ...

MUI移动端页面跳转

MUI移动端页面跳转相关推荐

最新文章

热门文章