效果图:
uniapp导航栏渐显,自定义返回按钮效果
.page.json
{
"path" : "pages/scanAdjustment/index",
"style" :
{
"navigationBarTitleText": "二维码详情信息",
"app-plus":{ //app
"titleNView":{
"backgroundColor":"#3B87F7", //导航栏背景色
"type":"transparent", //滚动渐显渐隐
"autoBackButton":false, //取消默认返回按钮
"titleColor":"#ffffff", //标题文字颜色
"buttons":[{ //自定义按钮相关
"type":"close",
"float":"right",
"background":"rgba(59,135,247,0.01)" //透明状态 可设置按钮背景颜色透明度为0.01
}]
}
}
}
},
顺带提一句 ,自定义导航栏的话,布局要去除系统栏的高度 如图:
系统栏高度:
其中var(--status-bar-height)为系统栏的高度
margin-top: var(--status-bar-height);