小程序 tabbar
app.json 直接配置:
官方文档: 自定义 tabBar
custom-tab-bar/index
在小程序根目录下新建 custom-tab-bar 文件夹,文件夹下建立相应的组件。
wxml 文件:
推荐使用 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。不过现在使用 view 也可以,之前是因为使用 map 组件可能会导致无法覆盖,现在 map 组件已经支持同层渲染,所以使用 view 也是没问题的。
js 文件:
tabbar 的配置主要在这里。
因为每个 tab 页下的自定义 tabBar 组件实例是不同的,在跳转新的tab 后,是一个新的 tabbar 实例,先前那个已经被销毁了,所以要重新设置。
在每个自定义的 tab 页面 onShow 方法中,
可见使用系统提供自定义 tabbar 方式不好的地方在于每个 tabbar 页面都要手动设置一遍选中状态。
为什么说是系统自定义的?
因为我们自定义的组件 custom-tab-bar/index 并没有在每个页面的 json 中进行单独配置进行组件的引用,都是系统默认配置好的。
官方文档 Tabbar 。
通过 useExtendedLib 扩展库 的方式引入 weui 组件库。
app.json 配置:
在 tab 页面的 page.json 中引入 tabbar 组件即可:
wxml 使用:
直接将第二种方式 使用系统自定义的方式 custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ,并将 app.json 中的 tabbar 配置删除即可。
在相应的 tab 页面引入自定义 tabbar 组件即可。
屏幕有效区域高度 windowsHeight,需要手动维护,系统不再维护。使用系统的 tabbar,屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ;而自定义的 tabbar 则没有计算 tabbar 高度,即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。