更新记录
1.0.0(2019-12-10)
使用原生tabbar,中间凸起,midButton
注意:mak一定不能再pages里边定义,不然点击事件失效,下方有实例可以查看
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
-
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') //隐藏
})
})
},