前言

最近在写app的时候，需要将tabbar导航栏中间的发布按钮设置为大图标，于是就和我另一个伙伴一起研究这个功能。有两种实现方式：①通过设置midButton属性放大图标，通过调用uni.onTabBarMidButtonTap实现页面跳转；②通过设置tabbar-list对应的iconfont属性，将图标转换为字体图标。具体实现如下。

方法一：midButton的使用

官方文档：pages.json页面路由–tabbar

官方描述：

在这里插入图片描述

官方文档：uni.onTabBarMidButtonTap(CALLBACK)

在这里插入图片描述

使用说明：

uniapp官方推出midButton属性，可以用来实现中间按钮样式的自定义，使用时需要注意list必须是偶数，也就是在tabbar-list数组中定义的导航数为偶数。且midButton中没有pagePath的属性，所以我们需要调用uni.onTabBarMidButtonTap()来实现页面跳转（uni.onTabBarMidButtonTap只支持app，所以使用midButton需要跳转的话，记得加上条件判断）。

代码展示：

pages.json

{
    
    
...
"tabBar": {
    
    
    "custom": true,
    "color": "#000000",
    "backgroundColor": "#f0f0f0",
    "selectedColor": "#a9f3f8",
    "borderStyle": "#f0f0f0",
    "list": [{
    
    
        "pagePath": "pages/examdata/examdata",
        "text": "资料",
        "iconPath": "/static/tabBar/examdata.png",
        "selectedIconPath": "/static/tabBar/examdataActive.png"
      },
      {
    
    
        "pagePath": "pages/treehole/treehole",
        "text": "树洞",
        "iconPath": "/static/tabBar/treehole.png",
        "selectedIconPath": "/static/tabBar/treeholeActive.png"
      },
      {
    
    
        "pagePath": "pages/tutorship/tutorship",
        "text": "辅导",
        "iconPath": "/static/tabBar/tutorship.png",
        "selectedIconPath": "/static/tabBar/tutorshipActive.png"
      },
      {
    
    
        "pagePath": "pages/mypage/mypage",
        "text": "我的",
        "iconfont": {
    
    
          
        },
        "iconPath": "/static/tabBar/mypage.png",
        "selectedIconPath": "/static/tabBar/mypageActive.png"
      }
    ],
    "midButton": {
    
    
      "width": "60px",
      "height": "60px",
      "iconWidth": "50px",
      "iconPath": "/static/tabBar/release.png"
    }
  },
  ...
}

app.vue

<script>
  export default {
    
    
    onLaunch: function() {
    
    
      console.log('App Launch')
      //在
      uni.onTabBarMidButtonTap(() => {
    
    
        uni.navigateTo({
    
    
          url: '/pages/release/release',
        });
      })
    },
    onShow: function() {
    
    
      console.log('App Show')
    },
    onHide: function() {
    
    
      console.log('App Hide')
    }
  }
</script>