原生tabbar凸起，底部发布覆盖tabbar，只支持app

https://ext.dcloud.net.cn/plugin?id=1083

使用原生tabbar，中间凸起，midButton

注意：mak一定不能再pages里边定义，不然点击事件失效，下方有实例可以查看

---

1. pages.json中对pages和tabbar进行修改

 

• //1. 对首页添加原生子窗口
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
     {
         "path": "pages/home/home",
         "style": {
             "navigationBarTitleText": "uni-app",
             "app-plus": {
                 "subNVues":[{
                     "id": "release-home", // 唯一标识  
                     "path": "pages/home/release",  
                     "type": "popup",
                     "style": {
                         "width": "100%",  
                         "height": "100%", 
                         "bottom":"0",
                         "left":"0",
                         "zindex":99,
                         //"mask":"rgba(0,0,0,0,0,)",   切记mask一定不能定义，不然点击事件会失效
                         "background":"transparent"
                     }  
                 }
                      ]  
  
             } 
         } 
     }
  // 2. 对tabbar添加midbutton
     "tabBar": {
      "midButton": {
          "text":"发布",
          "height":"65px",
          "backgroundImage": "static/img/tabbar/center-bg.png"
      }
  }

• APP.vue中进行监听原生中间按钮点击事件，midButton的相关参考：https://uniapp.dcloud.io/collocation/pages?id=tabbar

 

onLaunch: function() {
        console.log('App Launch')
        uni.onTabBarMidButtonTap(()=>{
            //在此可以直接进行跳转
            // uni.switchTab({
            //  url:'/pages/mine/mine'
            // })
            // return
            const subNVue = uni.getSubNVueById('release-home')
            subNVue.show('slide-in-bottom')
            //关闭
            uni.$on('close-release', ()=> subNVue.hide('slide-out-bottom') )
            uni.$on('tapThis', ({index, url})=>{
                console.log(index, url)
                // 在此根据url可以进行跳转页面
                //subNVue.hide('slide-out-bottom') //隐藏
            })
        })
    },