uniapp 动态控制顶部导航栏显隐,控制右上角按钮隐藏 app
uniapp动态控制顶部导航栏显隐。
·
//设置页面全屏
onShow() {
this.initAluminumLiquidCodeList();
this.handleInit();
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true);//隐藏手机顶部状态栏
plus.navigator.hideSystemNavigation();//隐藏手机底部导航按键
// #endif
},
//监听页面卸载事件 如果不加这句,会导致跳转到别的页面后也是全屏
onUnload() {
// #ifdef APP-PLUS
plus.navigator.setFullscreen(false);//显示手机顶部状态栏
plus.navigator.showSystemNavigation();//显示手机底部导航按键
// #endif
},
假设右侧只放了一个按钮
"style": {
"navigationBarTitleText": "页面标题",
"app-plus": {
"titleNView": {
"splitLine": {
"color": "#E8ECEF"
},
"autoBackButton": "true",// 左上角自动返回的按钮
"buttons": [{
"id": "1",
"float": "right",
"fontSize": "15px",
"fontSrc": "/static/iconfont/iconfont.ttf",// 字体样式可以自己设置
"text": "按钮",// 按钮文字
"width": "70px"
}]
}
}
}
隐藏右上角按钮
var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0,{
width: '0'
});
setTitleNViewButtonStyle方法第一个参数index的值为按钮在buttons数组的索引值,从0开始,如果放了两个按钮想隐藏第二个就
webView.setTitleNViewButtonStyle(1,{
width: '0'
});
请注意,由于h5浏览器的this里没有$mp,所以要去移动端上看效果
更多推荐
已为社区贡献8条内容
所有评论(0)