关于在使用uni-app底部导航栏tabBar中midButton遇到的一些问题

一直以来基本都是使用uni-app的tabBar,感觉挺好用的.

突然客户要求tabbar中间有个凸起,第一时间想到插件市场,搞了几个,不是很满意.

翻了翻unide 文档发现了midButton这个东西,很意外,很惊喜.先搞个例子再说,文档放上:

1.新建项目,很开参照文档搞了一个出来

"midButton": {
    "width": "80px",
     "height": "50px",
      "text": "12345热线",
       "iconPath": "static/tabbar/mm.png",
       "iconWidth": "24px"     

 }

好像没什么效果

2.再看下文档,发现"中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果" 按照这个在搞下

"midButton": {
    "width": "80px",
     "height": "70px",
      "text": "12345热线",
       "iconPath": "static/tabbar/mm.png",
       "iconWidth": "24px"     

 }

还是没效果,把iconWidth调大一点(40px)

"midButton": {
    "width": "80px",
     "height": "70px",
      "text": "12345热线",
       "iconPath": "static/tabbar/mm.png",
       "iconWidth": "40px"     

 }

3.此时都发现了中间的图标变了,刚开始我用的就是一个这样的图标,以为随便一个图标,只要设置好以后,经过uni内部一系列的骚操作,会搞成我们想要的,如下图(这个是插件市场截图)

这时我才发现凸起,需要一个圆形的图标,替换一下

我屮艸芔茻,中间的线是......,tabBar下的borderStyle默认是black,改成白色就可以了,

没有分割线感觉有点......凑活能用,如果需要那,.....我们把iconWidth小一点,borderStyle设成black

总感觉差点意思,或者需要一个类似这个图标,上面有一个曲线来达到我们要的效果,时间有限,下面的图是我组合的,有点丑

总体那大概就是这个意思,凑活着看,有不对的地方欢迎指正!

你以为完了么,此时才是高潮的部分,本着福利大家的意思想在uni的社区写个东西,写到一半的时候

 

这就很nice.  over