您现在的位置: 首页 > 开发编程 > HBuilder教程 > 正文

mui webview模式选项卡实现按需加载

作者:admin来源:DCloud_客服_Trust浏览:时间:2017-03-27 21:12:46我要评论
分享到

需求

使用多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中配置即可。
参考双首页secondwebview配置的使用

更多

关于5+app和流应用开发过程中的问题及需求,每个开发者都有自己的实现及优化方案。
如果大家有更多更好的方案,欢迎在社区分享以供学习交流。

附上源码,真机运行即可预览效果。

demo-tab-webview.zip

相关热词搜索: