# 原生tabbar的拦截 v1.4.8+

说明

此功能是使用 uni-hold-tabbar 垫脚片完成的,点击这里查阅API

# tabbar的拦截

在项目中,我们可能使用到官方提供的原生 tabbar,他提供的api很少,甚至不能愉快的拦截(一顿瞎几把吹)。所以才搞了个垫脚片。在路由插件中使用很简单,你可以声明开启拦截还是关闭拦截。其实路由插件有自动识别是否包含原生tabbar,做出相应的对策。当然你设置当前开关也是可以的!看操作....



 






const router = new Router({
    APP:{
        holdTabbar:false        //默认是true
    }, 
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8

很简单,通过配置 holdTabbar 来强制关闭tabbar拦截。告诉路由tabbar拦截不要你处理了,我自己搞的定!此时666扣起来!!!

# 相关api的重写

如果你的项目中没有在tabbar页面中使用到 chooseLocation/openLocation 这两个api,则你可以把 rewriteFun 设置为false。路由插件默认是对这两个api进行重写的,原生tabbar拦截器会阻碍这两个api,所以进行了重写。



 






const router = new Router({
    APP:{
        rewriteFun:false    //默认是true
    },
    routes:[
        // ....
    ]
});
1
2
3
4
5
6
7
8

# 手动处理遗漏的拦截

它关联的东西很多,配合页面出栈进栈,chooseLocation/openLocation 等api的监听来完成的。可能有时候你操作时,发现底部有一块点不动?恭喜您,这是一个bug。。。 想自己快点解决?那就手动来处理下吧。如果你不急! OK 莫问题。。。 github 提bug吧,放心我很快解决 飞机直达

# 手动处理

通过路由提供的APi获取到原生tabbar拦截对象,看操作。。。






 
 
 
 
 

const router = new Router({
    routes:[
        // ....
    ]
});
const $holdTab=router.$holdTab; 
$holdTab.hideHoldTab()
setTimeout(()=>{
    $holdTab.showHoldTab()
},3000)
1
2
3
4
5
6
7
8
9
10

通过路由实例提供的 getter $holdTab 获取到原生tabbar对象,然后你在看这里的API,即可自行操作。如实在不行去github提bug。