手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2021年01月的文章

uniapp custom tabbar

 事先申明,因为我是只在微信小程序下进行开发,所以下述内容都是基于微信小程序的。官方有定义教你怎么自定义TabBar,https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html,那么在uni-app里怎么处理呢?dCloud也有提及:【微信小程序自定义tabbar:微信提供一直基于webview自定义tabBar的方案。该功能体验不佳,不太推荐使用。如果要使用,参考微信文档,项目根创建 custom-tab-bar 目录,注意里边的代码是 wxml,wxss,不是 vue,uni-app编译器会直接拷贝该目录到微信小程序中】参考:https://uniapp.dcloud.io/collocation/pages?id=tabbar

OK,回到开始,我们一步一步来

1、参考【https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html】,在uniapp的目录下创建custom-tab-bar目录,创建:index.js/json/wxml/wxss文件(如果要偷懒,可以直接用官网上的示例工程打开,将文件复制过来即可)

2、配置pages.json,在原有的配置中增加:custom:true,当有这个值的时候。小程序将不会生成标准的tabbar。即使增加了这个KEY,原来配置中的list也不能去掉,毕竟,switchTab就是从tabbar.list中来进行判断的

3、打开工程,你会发现tabbar已经存在于每一个页面了。但这里会带来另一个问题,即:uni.hideTabbar()无效了(这个后面再说。。。)

4、官方例子中用了this.getTabbar。这个方法在UniApp是无法使用的,但可以曲线救国:this.$mp.page.getTabbar,将原来的判断全部改成这样就可以按照官方示例进行使用了。

5、如果在运行过程中,发现tabbar一直在闪烁,那么看一下你icon,是不是81px。我之前放的32px\48px的icon,都会导致tab切换的时候闪烁。换成81后就好了。