本文主要包含mui webview选项卡,mui webview,mui webview 刷新,mui webview是什么,mui 双webview,mui webview模式等相关知识,教程希望在学习及工作中可以帮助到您
需求
使用多mui webview，实现选项卡的切换。
普通方案
hello mui->tab bar（选项卡）->底部选项卡-webview模式，提供了多webview实现选项卡切换的方案。
实际开发中，如果页面内容过多，一次性加载多个webview并不是最优的方案。
更优方案
微信这款应用，大家都非常熟悉。微信首页的选项卡切换，未切换过的选项内容，第一次会有个加载的过程。也就是所谓的“按需加载”，或者叫做“动态加载”。
思路
思路其实很清晰，首次只加载首个选项对应的webview，其它选项在切换时判定其对应的webview是否存在，从而决定是否需要创建webview。
具体实现
html部分
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" data-id="home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" data-id="contact">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" data-id="email">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item" data-id="setting">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
子页面信息
var subInfos = [{
url: 'html/home.html',
id: 'home'
}, {
url: 'html/contact.html',
id: 'contact',
}, {
url: 'html/email.html',
id: 'email'
}, {
url: 'html/setting.html',
id: 'setting'
}];
var subStyles = {
top: '45px',
bottom: '51px'
};
为了方便后面的操作，提供一个简单的方法来获取子页面信息。
// 根据id查询子页面的信息
var getSubInfoById = function(infoList, id) {
var result = null;
for(var i = 0, len = infoList.length; i < len; i++) {
var _info = infoList[i];
if(_info.id === id) {
result = _info;
break;
}
}
return result;
};
加载首选项webview
var mainWv = plus.webview.currentWebview();
var titleEL = document.querySelector('.mui-title');
var activeTab = '';
// 默认只加载首页webview
var homeWv = plus.webview.create(subInfos[0].url, subInfos[0].id, subStyles);
mainWv.append(homeWv);
activeTab = subInfos[0].id;
选项卡切换
// 点击切换，动态创建其它webview；
mui('.mui-bar-tab').on('tap', 'a.mui-tab-item', function(e) {
var _self = this;
var targetTab = _self.getAttribute('data-id');
if(targetTab === activeTab) {
return;
}
titleEL.innerText = _self.querySelector('.mui-tab-label').innerText;
var _subWv = plus.webview.getWebviewById(targetTab);
// 若webview不存在，则创建；
if(!_subWv) {
var _subInfo = getSubInfoById(subInfos, targetTab);
_subWv = plus.webview.create(_subInfo.url, _subInfo.id, subStyles);
mainWv.append(_subWv);
}
_subWv.show();
// 隐藏之前的webview
plus.webview.getWebviewById(activeTab).hide('none');
activeTab = targetTab;
});
});
双首页方案
除了上面提供的方案，还可以使用HBuilder8.0后提供的双首页配置来进一步加快加载速度。也就是把第一个选项对应的webview，作为secondwebview，直接在manifest.json中配置即可。