小程序tabbar图标素材-微信小程序自定义Tabbar，附详细源码

tips:

1.

小程序

底部菜单标签个数不少于2个,最多不超过5个。

2.可以在

阿里巴巴

矢量图标库 找到你需要的图标。

3.小程序建议图标大小为81*81px

我这边选择的是64尺寸的png图片,每一个图标选择两种颜色,分别对应未选中状态和选中状态,具体按照你们设计项目进行

tips:

1.建立项目图片

文件夹

:images

2.在pages中建立相对应的菜单栏目文件夹

3.配置: tabBar配置

1.中,"window":{}和"tabBar":{}是同级

2. 全局配置

3. 设置tabbar地址:(Object object)

直接配置:

官方文档: 自定义 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 组件库。

配置:

在 tab 页面的 中引入 tabbar 组件即可:

wxml 使用:

直接将第二种方式

使用系统自定义的方式

custom-tab-bar/index 文件夹及文件移动到 components 自定义组件文件夹中 ,并将 中的 tabbar 配置删除即可。

在相应的 tab 页面引入自定义 tabbar 组件即可。

屏幕有效区域高度 windowsHeight,需要手动维护,系统不再维护。使用系统的 tabbar,屏幕的有效区域高度 windowsHeight = 屏幕高-状态栏高度-导航条高度-tabbar高度 ;而自定义的 tabbar 则没有计算 tabbar 高度,即 windowsHeight = 屏幕高-状态栏高度-导航条高度 。

分享一个完整的微信小程序自定义 Tabbar ,tabbar按钮可以设置为跳转页面,也可以设置为功能按钮。懒得看文字的可以直接去底部,博主分享了GitHub地址。

由于微信小程序自带的 Tabbar 功能比较单一,比如要做到中间是一个突出的圆形扫一扫按钮,就需要自定义 Tabbar 了。

博主创建了一个 Tabbar 组件,自己写的样式,在需要用到的页面引入组件。

组件使用了 position: fixed 定位到底部,所以在用到组件的页面,需要给 page 加上 margin-bottom 样式。

交互是通过在组件上定义的 bindtap 事件,来进行跳转页面或者触发功能模块,其中路由跳转是用的 。事件以及传参可以通过 triggerEvent ;

文件目录

引用组件

组件的data

组件的路由跳转

源码GitHub地址:

如果看了觉得有帮助的,我是@ 鹏多多11997110103 ,欢迎 点赞 关注 评论;

END

往期文章

个人主页