apicloud header footerTabble切换 openframeGroup

最新推荐文章于 2022-04-29 15:03:54 发布

转载最新推荐文章于 2022-04-29 15:03:54 发布 · 583 阅读

博客介绍了切换显示tab的相关处理，指出只需在openframegroup中添加激活状态，在切换页面中不能添加active，否则点击第三个tab时，第二个tab会闪现激活状态图标。

https://blog.youkuaiyun.com/tianshi51/article/details/53306467#commentBox

var tab = $api.byId('footer');
var eFooterLis = $api.domAll(tab, '.aui-bar-tab-item'),
    frames = []; // 选择所有匹配的DOM元素
var urlArr = ['menu_hot','menu_two','menu_three','menu_four','menu_hot'];
for (var i = 0, len = eFooterLis.length; i < len; i++) {
    var url = urlArr[i] + '.html';
    frames.push({
        name: 'frame' + i,
        url: url,
        bounces: false,
        vScrollBarEnabled: false,
        hScrollBarEnabled: false,
    })
}
api.openFrameGroup({
    name: 'group',
    scrollEnabled: true,
    index: 0,
    frames: frames,
    rect: {
        x: 0,
        y: headerPos.h,
        w: 'auto',
        h: mainPos.h - footerPos.h
    }
}, function(ret, err) {
    var $tab = $api.byId('footer');

    var footerAct = $api.dom(footer, '.aui-bar-tab-item.active');
    $api.removeCls(footerAct, 'active');

    var index = ret.index;
    if (index == 0) {
        api.refreshHeaderLoadDone();
        var $obj = $api.byId('0');
        $api.text($api.byId('header'), '热门');
        $api.addCls($obj, 'active');
    }
    if (index == 1) {
        var $obj = $api.byId('1');
        $api.text($api.byId('header'), '爆款');
        $api.addCls($obj, 'active');
    }
    if (index == 2) {
        var $obj = $api.byId('2');
        $api.text($api.byId('header'), '必下款');
        $api.addCls($obj, 'active');
    }
    if (index == 3) {
        var $obj = $api.byId('3');
        $api.text($api.byId('header'), '下载必备');
        $api.addCls($obj, 'active');
    }
})

切换显示的tab

goMenu: function(item) {

    // item.active = true
    this.activeId = item.id
    this.text = item.text

    var index = item.id;
    api.setFrameGroupIndex({
        name: 'group',
        index: index,
        scroll: true
    });
}

只需要在openframegroup中添加激活状态，在切换页面中不能添加active 否则底部状态会点击第三个tab时第二个tab也会闪现一下激活的状态图标。