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
});
}