父母和孩子是一副双面镜,现在孩子是未来的父母,现在的父母是之前的孩子

打算慢慢从Uni-App转微信原生,在很久之前一直在关注定义tabBar导航问题,后面也在《快速学会自定义组件做taBar导航栏,解决点击闪屏》中学习到部分内容,custom在uni-app上体验不是很好,学习中就拿出来在水水文章
关于个人感觉
1.自定义 性不强,相关路径配置还是需要在app.json
2.官方建议使用coner-view,该标签下无法使用动画(可见之前uni-app文章)
3.自定义tabar,感觉拿到了tabar的样式权
4.幸运没有出现点击的闪屏
Json声明
在app.json中声明custom为true,若有使用自定义组件需要声明全局usingComponents
{
"tabBar": {
"custom": true,
},
"usingComponents": {}
}
建立目录
在更目录建立custom-tab-bar目录之后,在建立以下文件(必须名为index)
index.js
index.json
index.wxml
index.wxss
弃用cover
仅支持cover-view和cover-img,若要使用到button的地方基本就凉凉,另外不支持动画;cover本身是为了解决视图层级,但它自身也是*****,view视图在之前学习中层级提高到1000就可以遮盖流量主和视频进度条
高亮顺序错乱
使用Component自定义tabBar存在一个点击高亮顺序不对错乱等问题;官方文档有这么一句话
用自定义组件的方式编写即可,
该自定义组件完全接管 tabBar 的渲染。另外,
自定义组件新增 getTabBar 接口,
可获取当前页面下的自定义 tabBar 组件实例
看到了什么?getTabBar接口对吧!于是我在文档找了一遍只看到

我承认我有亿点点迷茫,点击后高亮顺序错乱,学习中发现是因为custom-tab-bar中定义的Component参数无法在其他页面中获取参数,也就是点击的索引值;
终在代码块里面找到getTabBar的用法,解决了自定义tabBar导航高亮需点击两次的痛点
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})
