uniapp解决自定义tabbar闪烁问题

使用自定义tabbar,需要在项目根目录下创建custom-tab-bar文件夹,具体代码可以参考微信官方代码。

但上面的代码会出现一个问题,就是点击tabbar后,下面的图标无法选中,这是需要在tabbar页面代码里面加以下代码。

onShow() {
    initShow(this, 'home');
}

具体initShow代码如下:

/**
 * 初始化tabbar
 * @param obj
 * @param page
 */
export function initShow(obj, page) {
    let type = getStorageSync('type') || 'other';
    obj.setData({
        type
    });
    let selected = 0;
    switch (type) {
        case 'other':
            switch (page) {
                case 'read':
                    selected = 0;
                    break;
                case 'perusal':
                    selected = 1;
                    break;
                case 'my':
                    selected = 2;
                    break;
            }
            break;
        case 'student':
            switch (page) {
                case 'home':
                    selected = 0;
                    break;
                case 'read':
                    selected = 1;
                    break;
                case 'perusal':
                    selected = 2;
                    break;
                case 'my':
                    selected = 3;
                    break;
            }
            break;
        case 'teacher':
            switch (page) {
                case 'home':
                    selected = 0;
                    break;
                case 'read':
                    selected = 1;
                    break;
                case 'perusal':
                    selected = 2;
                    break;
                case 'my':
                    selected = 3;
                    break;
            }
            break;
        case 'director':
            switch (page) {
                case 'home':
                    selected = 0;
                    break;
                case 'read':
                    selected = 1;
                    break;
                case 'perusal':
                    selected = 2;
                    break;
                case 'my':
                    selected = 3;
                    break;
            }
            break;
    }
    if (typeof obj.getTabBar === 'function' &&
        obj.getTabBar()) {
        let len = obj.getTabBar().data.list.length;
        if (type !== 'other' && len === 3){
            obj.getTabBar().initTab();
        }
        obj.getTabBar().setData({
            selected: selected
        });
    }
}

上面代码就是根据不同的用户类型,显示不同的tabbar,然后选中当前tarbar图标文字。

在uniapp代码里,需要修改以下几处代码

let type = uni.getStorageSync('type') || 'other';
 if (typeof obj.$mp.page.getTabBar === 'function' && obj.$mp.page.getTabBar()) {
    let len = obj.$mp.page.getTabBar().data.list.length;
    if (type !== 'company' && len === 3){
        obj.$mp.page.getTabBar().initTab();
    }
    obj.$mp.page.getTabBar().setData({
        selected: selected
    });
}