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)//索引为当前标签的索引}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:uni-app中微信小程序自定义tabBar适配详情是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。