阅读:3319回复:0
uniapp中间tabBar突出,点击中间按钮弹出弹框。
前面做一个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,详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap 当然有人就想点进去看看,或者已经看过了,他就长下面这样, uni.onTabBarMidButtonTap(CALLBACK) 监听中间按钮的点击事件 平台差异说明
这不是和没写一样吗。仅支持APP开发,是个点击事件 是不是写哪里都不知道???一样。但是一想tabbar是全局配置,我猜写到App.vue里面。 然后再猜是写在onLaunch里面(其实是百度的)。嗯就这样成了 onLaunch: function() { uni.onTabBarMidButtonTap(()=>{ console.log(111) }) },但是官网明明说
但是需求是点击一下弹出一个蒙层。蒙层里面有两个按钮。一个扫码,一个跳手动填写页面 陷入沉思。。。。。。。。。。 要不我就跳个新页面吧,用uni.navigateTo 跳是跳过去了但是发现有问题,因为本来就是在那几个Tabbar点击的,那蒙层后面的背景,不是我从哪里跳,蒙层背景就该是那个页面吗?? 再次陷入沉思 后面发现了这个 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 OBJECT参数说明
上滑实现,至于为什么成了,看官网吧https://uniapp.dcloud.io/api/router?id=animation 蒙层背景也是各个Tabbar的背景,以下为完整的onLaunch钩子中的代码 onLaunch: function() { uni.onTabBarMidButtonTap(()=>{ uni.navigateTo({ url:"/pages/midTabBar/midTabBar", animationType:"slide-in-bottom", animationDuration :150 }) }) }, |
|||||||||||||||||||||||||||||||||||||||||||