前面做一个APP中间要求突出,记得以前好像uni没有自带得这个,然后看官网现在有这个了,刚好项目也需要,就写了下。下面就是完整得tabbar配置
"tabBar": {
"color": "#999999",
"selectedColor": "#333333",
"borderStyle": "#e8e8e8",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabBar/home-xuanzhong0.png",
"selectedIconPath": "static/tabBar/home-xuanzhong.png",
"text": "首页"
}, {
"pagePath": "pages/service/service",
"iconPath": "static/tabBar/weixiu-weixuanz0.png",
"selectedIconPath": "static/tabBar/weixiu-weixuanz.png",
"text": "维修"
}, {
"pagePath": "pages/statistics/statistics",
"iconPath": "static/tabBar/tj0.png",
"selectedIconPath": "static/tabBar/tj.png",
"text": "统计"
}, {
"pagePath": "pages/my/my",
"iconPath": "static/tabBar/my0.png",
"selectedIconPath": "static/tabBar/my.png",
"text": "我的"
}],
"midButton": {
"iconPath": "static/jiajia.png",
"text": "维修上报",
"height": "70px",
"iconWidth": "44px"
}
}
midButton属性就是中间按钮得配置,然后会发现midButton 中没有pagePath属性。就代表着他没有页面。不过官方也说得很清楚
midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用API:uni.onTabBarMidButtonTap,详见官网
这不是和没写一样吗。仅支持APP开发,是个点击事件
是不是写哪里都不知道???一样。但是一想tabbar是全局配置,我猜写到App.vue里面。
然后再猜是写在onLaunch里面(其实是百度的)。嗯就这样成了
onLaunch: function() {
uni.onTabBarMidButtonTap(()=>{
console.log(111)
})
},
但是官网明明说
函数名==>onLaunch
说明 ==>当uni-app 初始化完成时触发(全局只触发一次)
那为啥点一下触发,这个我也不是很清楚。
但是需求是点击一下弹出一个蒙层。蒙层里面有两个按钮。一个扫码,一个跳手动填写页面
陷入沉思。。。。。。。。。。
要不我就跳个新页面吧,用uni.navigateTo 跳是跳过去了但是发现有问题,因为本来就是在那几个Tabbar点击的,那蒙层后面的背景,不是我从哪里跳,蒙层背景就该是那个页面吗??
再次陷入沉思
后面发现了这个
uni.navigateTo(OBJECT)
发现下面有个 animationType(窗口动画)参数,值为slide-in-bottom 新窗体从底部进入。
蒙层背景也是各个Tabbar的背景,以下为完整的onLaunch钩子中的代码(如果蒙层没有生效,需要去page.json里面在需要跳转的页面下配置:backgroundColor": "transparent )
以下为page.json代码
,{
"path" : "pages/midTabBar/midTabBar",
"style" : {
"backgroundColor": "transparent", // 防止ios不透明
"app-plus": {
"titleNView": false
}
}
}
以下为app.vue代码
onLaunch: function() {
uni.onTabBarMidButtonTap(() => {
uni.navigateTo({
url: "/pages/midTabBar/midTabBar",
animationType: "slide-in-bottom",
animationDuration: 150
})
})
},