uni-app中微信小程序自定义tabBar适配详情

导读：这个方法可以作为大部分微信小程序的支持，但是在uni-app文档中找不到相关描述的API需求

我们需要实现一个特殊的导航栏，中间的图标在微信小程序中突出显示。

下图

实现方法设计

要制作这个特殊的导航栏，绝对不可能直接在配置文件中写列表。然后，有两种替代方法。

在每个页面上加载一个tabBar组件，并在渲染页面的同时渲染它。设置自定义标签栏并修改标签栏的样式。优缺点分析：方法1实现起来有点简单，但是也存在一些问题，比如代码复用性低、性能低、接口跳转等。方法二是微信官方提供的，是自定义方法。我相信它在性能方面会有很大的优势。因此，选择方法2。

1.检查文档和官方演示

正式文件

简单描述就是需要在根目录中添加一个自定义的-tab-bar目录，其中的文件结构与自定义组件的结构一致。然后在applet配置文件中将tabbar更改为自定义模式。

官方代码

主要集中在三个部分

配置文件

自定义标签栏目录

在页面生命周期中设置索引方法

事实上，这段代码很容易理解。页面生命周期是监控组件所在页面的生命周期。上面的代码是为了监控页面显示。页面显示后，获取tabBar的对象，然后在tabBar中设置索引索引。2.迁移到uni-app框架

以上方法是开发微信小程序，而我用uni-app框架开发微信小程序。因此，我们需要将它们移植到uni-app的框架中。

修改配置文件

在uni-app中，page.json编译成微信小程序的app.json。因此，我们直接修改page.json

自定义标签栏目录的调整

我们知道，uni-app采用类似Vue的开发，将一个Vue文件编译成四个微信页面文件(wxml、wxss、json、js)。那么，我可以直接写一个自定义的tab-bar.vue文件吗？一开始也是这么想的，后来发现uni-app只编译页面目录和组件目录下的vue文件。微信小程序要求自定义标签栏必须在项目根目录下。那你只能在uni-app下创建一个自定义的-tab-bar目录，老老实实写四套微信。

写完后uni-app会完美的将目录复制到微信小程序项目的根目录。选项卡页面中的适应方法

这是我在实际发展中最头疼的问题。因为微信小程序的这个引用和uni-app的这个引用不一样。因此，如果直接复制代码，就会出现编译错误。另一个问题是uni-app没有为页面生命周期提供事件监控。

经过一番探索，我发现在onShow事件中编写索引设置方法是等效的。那么就只有这个问题了。

如果直接复制，就没有效果了

Uni-app的这个引用是不一样的，所以在判断getTabBar的时候会得到“undefined”，所以不会执行下面的操作。如果你去掉判断，你会直接报告一个“未定义”的错误。

不能实现吗？其实不然，一切都会变的。Uni-app也是编译成小程序的，所以绝对有迹可循。

我们先来看看uni-app中的这个。

我们可以清楚的看到里面有一个$mp对象，说明应该是微信小程序的特殊对象。接下来，我们继续分析$mp。

有一个隐藏很深的getTabBar方法，我们直接调用，相当于在微信小程序中调用这个. getTabBar。

因此，我们可以把onShow的内容写如下。

一些优雅的包装

独立设置索引方法

在方法对象中，添加

settabarindex(索引){ if(这种类型的.$ mp.page.getTabBar===' function '这个$ MP。佩奇。gettapbar()){ this .$ MP。佩奇。gettapbar().setDATa({选定的：索引})} }使用混入类避免重复书写复制

在main.js中，添加

vue。mixin({ methods : { settabarindex(index){ if(type of this .$ mp.page.getTabBar===' function '这个$ MP。佩奇。gettapbar()){ this .$ MP。佩奇。gettapbar().setData({选定的：索引})} })混入后的使用

在页面文件中

onShow(){这个。settabarindex(0)//索引为当前标签的索引}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。