手机版

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

时间:2021-08-19 来源:互联网 编辑:宝哥软件园 浏览:

导读:这个方法可以作为大部分微信小程序的支持,但是在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)//索引为当前标签的索引}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:uni-app中微信小程序自定义tabBar适配详情是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。