小程序如何设计带加号的长尾tabbar，实现便捷添加功能？

本文共计921个文字，预计阅读时间需要4分钟。

目录+前言+创建一个Tabbar组件的步骤+HTML代码+JavaScript代码+在需要的页面引入组件+适应不同页面+设置Tabbar选中状态+CSS代码+最终效果+总结+前言+相信大家也看过很多app或小程序的Tabbar设计，下面将简单介绍如何创建一个Tabbar组件。

目录

• 前言
• 首先新建一个tabbar的组件。
• html代码
• js代码
• 在需要的页面引入组件
• 适用不同页面
• 设置tabbar选中状态
• css代码
• 最终效果
• 总结

前言

相信大家也看过很多app或者小程序的tabbar中间是一个突出加号，这个用自带的组件无法实现，需要我们手动写一个tabbar的样式来实现效果。我们一起看看吧！

首先新建一个tabbar的组件。

html代码

注意点：需要判断是否是iphonex系列的手机，这类手机需要设置高度。对于中间的加号突出的菜单，格外设置样式。直接使用了navigator，省去了需要写方法跳转这一步骤。但是需要设置hover-class="none"属性。