goddess
侠客
侠客
  • 最后登录2021-12-20
  • 发帖数18
阅读:3319回复:0

uniapp中间tabBar突出,点击中间按钮弹出弹框。

楼主#
更多 发布于:2020-09-01 19:09
前面做一个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)
监听中间按钮的点击事件
平台差异说明
AppH5微信小程序支付宝小程序百度小程序字节跳动小程序QQ小程序
√(HBuilderX 2.3.4+)xxxxxx

这不是和没写一样吗。仅支持APP开发,是个点击事件
是不是写哪里都不知道???一样。但是一想tabbar是全局配置,我猜写到App.vue里面。
然后再猜是写在onLaunch里面(其实是百度的)。嗯就这样成了
onLaunch: function() {
    uni.onTabBarMidButtonTap(()=>{
        console.log(111)
    })
},
但是官网明明说
函数名说明
onLaunch当uni-app 初始化完成时触发(全局只触发一次)
那为啥点一下触发,这个我也不是很清楚。
但是需求是点击一下弹出一个蒙层。蒙层里面有两个按钮。一个扫码,一个跳手动填写页面
陷入沉思。。。。。。。。。。
要不我就跳个新页面吧,用uni.navigateTo 跳是跳过去了但是发现有问题,因为本来就是在那几个Tabbar点击的,那蒙层后面的背景,不是我从哪里跳,蒙层背景就该是那个页面吗??
再次陷入沉思
后面发现了这个


uni.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
OBJECT参数说明
参数类型必填默认值说明平台差异说明
urlString需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数:-
animationTypeStringpop-in窗口显示的动画效果,详见:窗口动画App
animationDurationNumber300窗口动画持续时间,单位为 msApp
通过设置animationType属性为"slide-in-bottom"
上滑实现至于为什么成了,看官网吧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
        })
    })
},
游客


返回顶部

公众号

公众号