uni-app的midButton,中间突出,点击跳转页面或者出现弹框。

前面做一个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
			})
		})
	},
  • 9
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值