更新记录

1.0.0(2019-12-10) 下载此版本

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

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


平台兼容性

  1. pages.json中对pagestabbar进行修改

    //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"
        }
    }
  2. 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') //隐藏
                })
            })
        },

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问