w***@126.com
w***@126.com
  • 发布:2016-05-19 09:07
  • 更新:2016-08-19 11:45
  • 阅读:3034

web项目底部选项卡切换子页面问题

分类:MUI

我建立了一个web项目
底部有个导航栏:

<nav class="mui-bar mui-bar-tab bottom_color">
<a class="mui-tab-item mui-active white" href="home.html" id="home">
<span class="mui-icon mui-icon-home white"></span>
<span class="mui-tab-label white">简介</span>
</a>
<a class="mui-tab-item" href="foot.html" id="foot" >
<span class="mui-icon mui-icon-eye white"></span>
<span class="mui-tab-label white">足迹</span>
</a>
<a class="mui-tab-item" href="list.html" id="list">
<span class="mui-icon mui-icon-pengyouquan white"></span>
<span class="mui-tab-label white">年轮</span>
</a>
<a class="mui-tab-item" href="set.html" id="set">
<span class="mui-icon mui-icon-gear white"></span>
<span class="mui-tab-label white">维护</span>
</a>
</nav>

参考了案例中子页面切换的方法有两种
一种是DIV切换,一种是webview模式。
问题来了。。。我不想用DIV模式,因为那样页面会很庞大
但webview模式却要调用plus,因为我是web项目,浏览器无法支持plus。。
求指导或者给我点案例,我该怎么做?

2016-05-19 09:07 负责人:无 分享
已邀请:
minlanren

minlanren

我之前也是用tab div模式 页面加逻辑 1000+的代码 打开都卡

现在也想用webview 但是tab底部 切换也切换不了

minlanren

minlanren

我的也是web项目

赵梦欢

赵梦欢 - 专注前端,乐于分享!

用iframe代替多子webview形式的tabbar在浏览器的兼容处理方法:

var createIframe = function (el, opt) {  
    var elContainer = document.querySelector(el);  
    var wrapper = document.querySelector(".mui-iframe-wrapper");  
    if(!wrapper){  
        // 创建wrapper 和 iframe  
        wrapper = document.createElement('div');  
        wrapper.className = 'mui-iframe-wrapper';  
        for(var i in opt.style){  
            wrapper.style[i] = opt.style[i];  
        }  
        var iframe = document.createElement('iframe');  
        iframe.src = opt.url;  
        iframe.id = opt.id || opt.url;  
        iframe.name = opt.id;  
        wrapper.appendChild(iframe);  
        elContainer.appendChild(wrapper);  
    }else{  
        var iframe = wrapper.querySelector('iframe');  
        iframe.src = opt.url;  
        iframe.id = opt.id || opt.url;  
        iframe.name = iframe.id;  
    }  
}

调用也很简单:

//当前激活选项  
var activeTab = subpages[Index],title=document.querySelector(".mui-title");  
mui('.mui-bar-tab').on('tap', 'a', function(e) {  
    // 获取目标子页的id  
    var targetTab = this.getAttribute('href');  
    if (targetTab == activeTab) {  
        return;  
    }          
    // 更换标题  
    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;      
    // 子页内容切换  
    if(mui.os.plus){  
        // 显示目标webview  
        plus.webview.show(targetTab);  
        // 隐藏当前webview  
        plus.webview.hide(activeTab);  
        // 更改当前活跃的选项卡  
        activeTab = targetTab;  
    }else{  
        // 创建iframe代替子页面  
        createIframe('.mui-content',{  
            url: targetTab,  
            style: {  
                top: '45px',//设置距离顶部的距离  
                bottom: '50px'//设置距离底部的距离  
            }  
        });  
    }  
})

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