美文网首页
mui首页导航栏

mui首页导航栏

作者: 小小吴_a1e2 | 来源:发表于2018-06-22 10:16 被阅读0次

mui开发的入口文件(非登录页面)导航栏子页面切换代码.

//预加载

mui.init({})

var subInfos = [{

    url: "page url",   //子页面地址

    id: "page id"   //子页面id

}, {

    url: "page url",

    id: "page id",

}, {

    url: "page url",

    id: "page id"

}, {

    url: "page url",

    id: "page id"

}];

var subStyles = {

    top: '0px',

    bottom: "44px"

};

// 根据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;

};

mui.plusReady(function(){

  //加载首选项webview

  var mainWv = plus.webview.currentWebview();

  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('id');

       if(targetTab === activeTab) {

           return;

       }

       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;

    })

})

相关文章

网友评论

      本文标题:mui首页导航栏

      本文链接:https://www.haomeiwen.com/subject/wzohyftx.html