jqz
jqz
  • 发布:2015-01-28 16:42
  • 更新:2018-08-23 13:43
  • 阅读:11185

mui 使用tabview ,其他页面跳转到首页时,页面无法切换

分类:MUI

在设置里面点击关于,进入关于页面,之后点击跳转到tabview首页后,tab 切换就无效了 。跳转我用的是openWindow方法、
mui.openWindow({
id: 'tab-webview-main',
url: 'tab-webview-main.html',
waiting: {
autoShow: true
}
});

一直纠结呢。

2015-01-28 16:42 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

点击“关于mui”的时候,模拟点击底部选项卡“首页”的切换逻辑即可。

比如主页面有如下选项卡dom节点:

<nav class="mui-bar mui-bar-tab">  
    <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">  
        <span class="mui-icon mui-icon-home"></span>  
        <span class="mui-tab-label">首页</span>  
    </a>  
    <a class="mui-tab-item" href="tab-webview-subpage-chat.html">  
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>  
        <span class="mui-tab-label">消息</span>  
    </a>  
    <a class="mui-tab-item" href="tab-webview-subpage-contact.html">  
        <span class="mui-icon mui-icon-contact"></span>  
        <span class="mui-tab-label">通讯录</span>  
    </a>  
    <a class="mui-tab-item" href="tab-webview-subpage-setting.html">  
        <span class="mui-icon mui-icon-gear"></span>  
        <span class="mui-tab-label">设置</span>  
    </a>  
</nav>

首页的id为defaultTab,在主页面通过自定义事件模拟“首页”选项卡点击事件,如下:

//自定义事件,模拟点击“首页选项卡”  
document.addEventListener('gohome',function () {  
    var defaultTab = document.getElementById("defaultTab");  
    //模拟首页点击  
    mui.trigger(defaultTab,'tap');  
    //切换选项卡高亮  
    var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
    if(defaultTab!==current){  
        current.classList.remove('mui-active');  
        defaultTab.classList.add('mui-active');  
    }  
});

然后在设置界面,假设"关于mui"的a标签id为"about",例如:

<ul class="mui-table-view" style="margin-top: 25px;">  
    <li class="mui-table-view-cell">  
        <a id="about" class="mui-navigate-right">  
            关于mui  
        </a>  
    </li>  
</ul>

给"关于mui"添加点击事件,点下时触发主页面的gohome自定义事件,如下:

document.getElementById("about").addEventListener('tap',function () {  
    //获得主页面的webview  
    var main = plus.webview.currentWebview().parent();  
    //触发主页面的gohome事件  
    mui.fire(main,'gohome');  
});
  • 刘俊朋

    老大写错了吧,你这是获取当前页, 应该是获取主页吧.

    var main = plus.webview.getLaunchWebview();

    还有你.parent(); 加这是什么意思?

    2015-07-21 22:24

  • DCloud_UNI_CHB

    我的代码针对的是hello mui中的webview模式的选项卡示例,因此是当前页的父页面,parent就是当前webview的父webview。

    2015-08-03 12:23

挨踢小子

挨踢小子

返回首页就好使了

6***@qq.com

6***@qq.com - 90后IT男|CEO|创始人

我也是,注册或者登陆后跳转首页就变卡了,甚至会错版

1***@qq.com

1***@qq.com

mui('body').on('tap', 'a', function () { document.location.href = this.href; });
加上这个就可以用了

  • 1***@qq.com

    这是手机端的

    2018-08-03 18:17

  • 1***@qq.com

    http://www.cnblogs.com/bobball/p/7019088.html 不懂可以看看这个

    2018-08-03 18:18

  • 6***@qq.com

    a代表什么

    2018-08-03 20:23

  • 6***@qq.com

    。。。不用还好,用了更错版,甚至底部选项卡都没了

    2018-08-03 20:25

n***@aliyun.com

n***@aliyun.com

<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-extra mui-icon-extra-hotel"></span>
<span class="mui-tab-label">商城</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">客服</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
<span class="mui-tab-label">购物车</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>

<script src="../static/js/mui.min.js"></script>  
<script src="../static/js/iconfont.js"></script>  
<script type="text/javascript" charset="utf-8">  
    mui.init({  
        subpages:[{  
          url:'subpages/mainbody.html',  
          id:'mainbody.html',  
          styles:{  
            top:'45px',//mui标题栏默认高度为45px;  
            bottom:'45px'//默认为0px,可不定义;  
          }  
        }]  
      });  
mui.ready(function() {  
//Tap事件触发mainbody的Item打开新页面  
var urlhtml = ['index.html','shopmall.html','supports.html','carts.html','myprofile.html'];  
var urldir = ['','subpages/Shopmall','subpages/Supports','subpages/Carts','subpages/Myprofile']  
    var lis=document.getElementsByClassName('mui-tab-item');  
        for (var i = 0; i <=lis.length; i  ) {  
              lis[i].onclick = function(n){  
                    if (n == 0) {  
                         return false;  
                    } else{  
                        //alert(n);  
                         return function(){  
                        mui.openWindow({  
                        url: '' urldir[n] '/' urlhtml[n] '',   
                        id: '' urlhtml[n] ''  
                         });  
                    }  
                    }  
                }(i);                        
            };  
    });  

</script>

我的问题是:上面代码在“边改边看模式” 可以打开打开新窗口,但是,在真机上,点击这些图标就没反应,请问这是什么原因啊?
1.“边改边看模式” 点击可以打开新窗口

2.但是,发不到“真手机”上,点击没反应,而且,同样的方法,下面内容,在“边改边看模式” 和“真手机”都能打开新窗口
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-camera"></span>
<div class="mui-media-body">0</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">1</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-extra mui-icon-extra-trend"><span class="mui-badge">5</span></span>
<div class="mui-media-body">2</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-help"></span>
<div class="mui-media-body">3</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouye5"></use>
</svg>
</span>
<div class="mui-media-body">4</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">5</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouye1"></use>
</svg>
</span><div class="mui-media-body">6</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon ">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-icon6"></use>
</svg>
</span>
<div class="mui-media-body">7</div></a></li>

                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">  
                        <span class="mui-icon mui-icon-extra mui-icon-extra-heart"></span>  
                        <div class="mui-media-body">8</div></a></li>          
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">  
                        <span class="mui-icon mui-icon-extra mui-icon-extra-outline"></span>  
                        <div class="mui-media-body">9</div></a></li>  
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">  
                        <span class="mui-icon mui-icon-extra mui-icon-extra-addpeople"></span>  
                        <div class="mui-media-body">10</div></a></li>  
            </ul>   
    </div>  

<script>
mui.ready(function() {
//Tap事件触发mainbody的Item打开新页面
var urlhtml =['0.html','1.html','2.html','3.html','4.html','5.html','6.html','7.html','8.html','9.html','10.html'];
var urldir = ['0','1','2','3','4','5','6','7','8','9','10']
var lis=document.getElementsByClassName('mui-table-view-cell');
for (var i = 0; i <=lis.length; i++) {
lis[i].onclick = function(n){
return function(){
mui.openWindow({
url: ''+urldir[n]+'/'+urlhtml[n]+'',
id: ''+urlhtml[n]+''
});
}
}(i);
};
});

</script>

培培弟

培培弟

为什么我真机调试各种跳没问题,打包后的从子页面跳出来Tab不跳转?

该问题目前已经被锁定, 无法添加新回复