uni-app:tabbar自定义中间凸起按钮的tabbar(hbuilderx 3.7.3)

一，官方文档地址:

https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar

https://uniapp.dcloud.net.cn/api/ui/tabbar.html#ontabbarmidbuttontap

二，代码

1，pages.json

"tabBar": {
        "color": "#7A7E83", //字体颜色
        "selectedColor": "#007AFF", //选中时字体颜色
        "borderStyle": "black", //底部的上边框线条
        "backgroundColor": "#F8F8F8", //底部背景色
        "fontSize": "12px", //字体大小
        "spacing": "5px", //字体到图标的距离
        "height": "60px", //底部高
        "list": [
          {
            "pagePath": "pages/grade/grade",
            "text": "年级",
            "iconPath": "static/tabbar/grade.png",//未选中时图片样式
            "selectedIconPath": "static/tabbar/gradeSel.png"//选中时图片样式
          },
          {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "static/tabbar/my.png",
            "selectedIconPath": "static/tabbar/mySel.png"
          }
        ],
        "midButton": {
                    "width": "80rpx",
                    "height": "80rpx",
                    "text": "收藏",
                    "iconPath": "static/tabbar/heartSel.png",
                    "iconWidth": "50rpx"
                }
      }

说明：重点是midButton,即中间按钮，它仅在 list 项为偶数时有效

说明：midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。
         监听点击事件为调用API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

2，App.vue

<script>
    import {util} from './common/util.js';
    export default {

        onLaunch: function() {
            console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
            console.log('App Launch');
            //中间按钮被点击的处理
           uni.onTabBarMidButtonTap(()=>{
                    console.log('中间按钮的逻辑操作');
                    uni.navigateTo({
                        url: "/pages/favoritelist/favoritelist"        
                    });
           });
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
    }
</script>

<style lang="scss">
    /*每个页面公共css */
    @import '@/uni_modules/uni-scss/index.scss';
    /* #ifndef APP-NVUE */
    @import '@/static/customicons.css';
    /* #endif */
        @import '@/common/css/common.css';
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: [email protected]

三，测试效果

四,查看hbuilderx的版本: