评论
解决原生小程序custom(getTabBar接口)自定义tabBar导航高亮需点击两次

解决原生小程序custom(getTabBar接口)自定义tabBar导航高亮需点击两次

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

解决原生小程序custom(getTabBar接口)自定义tabBar导航高亮需点击两次

打算慢慢从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(getTabBar接口)自定义tabBar导航高亮需点击两次

我承认我有亿点点迷茫,点击后高亮顺序错乱,学习中发现是因为custom-tab-bar中定义的Component参数无法在其他页面中获取参数,也就是点击的索引值;

终在代码块里面找到getTabBar的用法,解决了自定义tabBar导航高亮需点击两次的痛点

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})
解决原生小程序custom(getTabBar接口)自定义tabBar导航高亮需点击两次

案例

https://yinfengrui.lanzouw.com/ilGVfw90b3a