uniapp隐藏导航栏左侧返回键,并自定义右侧的图片

根据我完成项目需求所写。

首先是显示右侧的图片,添加属性titleNView中添加buttons属性,其次,text是要填写的内容,如果是文字,直接填入就行,如果是图片,建议使用字体图标,在iconfont-阿里巴巴矢量图标库中找到你要的图片,并加入购物车放置在项目中,主要是为了获取到 “文件名.ttf” 的文件,然后将文件路径写到fontSrc中,如图

uniapp隐藏导航栏左侧返回键,并自定义右侧的图片_第1张图片

通过在线字体编辑器-JSON在线编辑器 (qqe2.com)这个文件打开 “文件名.ttf” 文件,获取文件的名字,如图

uniapp隐藏导航栏左侧返回键,并自定义右侧的图片_第2张图片

 在text输入文件名的时候  将$换成 \u  这是书写格式,右侧导入图片就完成了

 然后是隐藏左侧返回按钮 在titleNView中加入“autoBackButton”:false,如果没有用就看下一步

uniapp隐藏导航栏左侧返回键,并自定义右侧的图片_第3张图片

 在你想隐藏返回按钮的当前页面下,mounted 钩子里加上如下代码段,即可

var a = document.getElementsByClassName('uni-page-head-hd')[0]
a.style.display = 'none';

但是这样会让右侧图片移动到左侧,所以我用的以下方法,将返回键隐藏但占位

uniapp隐藏导航栏左侧返回键,并自定义右侧的图片_第4张图片

 效果图

uniapp隐藏导航栏左侧返回键,并自定义右侧的图片_第5张图片

 

 

你可能感兴趣的:(uni-app)