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:TabBarMidButtonTap,详见
这不是和没写⼀样吗。仅⽀持APP开发,是个点击事件
是不是写哪⾥都不知道⼀样。但是⼀想tabbar是全局配置,我猜写到App.vue⾥⾯。
然后再猜是写在onLaunch⾥⾯(其实是百度的)。嗯就这样成了
onLaunch:function(){
console.log(111)
})
},
但是官⽹明明说
函数名==>onLaunch
说明 ==>当uni-app 初始化完成时触发(全局只触发⼀次)
那为啥点⼀下触发,这个我也不是很清楚。
但是需求是点击⼀下弹出⼀个蒙层。蒙层⾥⾯有两个按钮。⼀个扫码,⼀个跳⼿动填写页⾯
陷⼊沉思。。。。。。。。。。
要不我就跳个新页⾯吧,⽤uni.navigateTo 跳是跳过去了但是发现有问题,因为本来就是在那⼏个Tabbar点击的,那蒙层后⾯的背景,不是我从哪⾥跳,蒙层背景就该是那个页⾯吗??
再次陷⼊沉思
后⾯发现了这个
发现下⾯有个 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.navigateTo({
url:"/pages/midTabBar/midTabBar",
animationType:"slide-in-bottom",
selectediconpath什么意思animationDuration:150
})
})
},
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论