小程序自定义tabbar实现中间图标突出效果（萌新踩坑）

需求：

为了实现标题这个效果，本萌新踩了很多坑，找了许多网页，之后找到了一个篇写的还不错的文章，抱着试一试的心态按照它做了，最后还是调了很久。

 

文章链接：

https://www.jianshu.com/p/ce1c3c25527c

 

后期调整：

这是最终实现的效果。

 

问题：

①图标无法显示：

"iconPath": "/tabbarComponent/icon/home.png"

在tabberComponent之前加上/

 

②中间图标偏移(我这里有点向右偏移)：

在这个文件夹里，加上一行

margin-left:-10%;

 

③点击中间图标没有跳转：

可以去搜索一下这行代码，明白switchTab与navigate之间的区别，看看自己需要的是哪一个。

open-type="switchTab"

④与steps步骤条冲突：

就是我的步骤比较多，然后步骤显示的时候，发现它的字会从我的tabbar中穿过去，看起来十分的杂乱。我并没有实质性解决这个问题，我在外面套了个view标签，然后给view标签加了点样式

 

.step-style{
  position: fixed;
  overflow-y: scroll;
  height: 80%;
  width: 96%;
}