uniapp动态显隐导航栏图标

最新推荐文章于 2025-07-08 11:16:20 发布

你头发乱了喔_

最新推荐文章于 2025-07-08 11:16:20 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app 小技巧文章标签：前端 uni-app

本文链接：https://blog.youkuaiyun.com/dujyong/article/details/122197177

小技巧同时被 2 个专栏收录

26 篇文章

订阅专栏

uni-app

14 篇文章

订阅专栏

本文介绍如何在uniapp中动态隐藏和显示导航栏图标，通过设置图标宽度为0来实现隐藏，当需要显示时，调整宽度回100。此方法适用于页面状态切换或不同条件下的图标展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp动态显隐导航栏图标

实现思路: 将图标的宽度设置为0,就可以将图标隐藏
上代码:

var pageView= this.$mp.page.$getAppWebview();  
if("隐藏条件触发") { // 隐藏
	pageView.setTitleNViewButtonStyle(0,{  
   		width: '0'  
	});  
	pageView.setTitleNViewButtonStyle(1,{  
    	width: '0'  
	});
} else { // 显示  
	pageView.setTitleNViewButtonStyle(0,{  
   		width: '100' // 具体数值根据图标大小调整
	});  
	pageView.setTitleNViewButtonStyle(1,{  
    	width: '100' // 具体数值根据图标大小调整
	});
}